import { DonutChart } from '@mantine/charts';
import {
  Center,
  Group,
  Indicator,
  Loader,
  Paper,
  Stack,
  Text,
} from '@mantine/core';
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useState } from 'react';
import useSWR from 'swr';
import { post } from '../utils/post';

export default function OverallDonutChart({ analytic = 'clicks' }) {
  const { data, error, isLoading, isValidating, mutate } = useSWR(
    `wp_bannerize_overall_${analytic}`,
    post,
  );

  const [donutData, setDonutData] = useState([]);

  const label =
    analytic === 'clicks'
      ? __('Clicks', 'wp-bannerize')
      : __('Impressions', 'wp-bannerize');

  useEffect(() => {
    if (data) {
      const row = data[0];

      const donutData = [
        {
          name: sprintf(__('Total %s', 'wp-bannerize'), label),
          value: +row[`total_${analytic}`],
          color: 'blue',
        },
        {
          name: sprintf(__('Total Banner %s', 'wp-bannerize'), label),
          value: +row[`total_banner_${analytic}`],
          color: 'teal',
        },
        {
          name: __('Total Banner Count by Referrer', 'wp-bannerize'),
          value: +row.total_banner_count_by_referrer,
          color: 'red',
        },
        {
          name: sprintf(__('Total Referrer %s', 'wp-bannerize'), label),
          value: +row[`total_referrer_${analytic}`],
          color: 'yellow',
        },
        {
          name: sprintf(__('Total Unique IP %s', 'wp-bannerize'), label),
          value: +row[`total_unique_ip_${analytic}`],
          color: 'green',
        },
      ];

      setDonutData(donutData);
    }
  }, [data]);

  if (isLoading || !donutData) {
    return (
      <Center>
        <Loader />
      </Center>
    );
  }

  return (
    <Paper withBorder mt={16} pb={16}>
      <Text align="center" size="xl" mt={16}>
        {label}
      </Text>
      <Group mt={16} justify="space-around">
        <DonutChart
          size={160}
          data={donutData}
          thickness={40}
          tooltipDataSource="segment"
          withTooltip={true}
        />

        <Stack gap={'xs'}>
          {donutData.map(({ name, value, color, count }) => (
            <div key={name}>
              <Group gap={12}>
                <Indicator
                  inline
                  color={color}
                  processing={value > 50}></Indicator>
                <Text size="xs">{name}</Text>
              </Group>
              <Text size="xs" ml={12} fw={800}>
                {value}
              </Text>
            </div>
          ))}
        </Stack>
      </Group>
    </Paper>
  );
}