import { AreaChart, BarChart } from '@mantine/charts';
import {
  Badge,
  Button,
  Center,
  Fieldset,
  Group,
  Loader,
  Menu,
  rem,
  SegmentedControl,
  Stack,
  useMantineTheme,
} from '@mantine/core';
import {
  IconCalendar,
  IconCalendarMonth,
  IconChartAreaLineFilled,
  IconChartBar,
  IconEyePlus,
  IconFileTypeCsv,
  IconHandClick,
  IconRefresh,
  IconSelect,
  IconSquareRoundedPercentage,
} from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import useSWR from 'swr';
import { downloadCSV, post } from '../utils';
import { BannersMultiSelect } from './BannersMultiSelect';
import { CampaignsMultiSelect } from './CampaignsMultiSelect';

export default function TrendCharts({ analytic = 'clicks' }) {
  const theme = useMantineTheme();
  const [chart, setChart] = useState('bar');
  const [accuracy, setAccuracy] = useState('day');
  const [parseData, setParseData] = useState();
  const [action, setAction] = useState();
  const [key, setKey] = useState();
  const [campaigns, setCampaigns] = useState([]);
  const [banners, setBanners] = useState([]);

  const fetcher = async () =>
    post(action, {
      accuracy,
      campaigns,
      banners,
    });

  const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher);

  const title = {
    impressions: __('Impressions', 'wp-bannerize'),
    clicks: __('Clicks', 'wp-bannerize'),
    ctr: __('CTR', 'wp-bannerize'),
  }[analytic];

  const color = {
    impressions: 'blue.6',
    clicks: 'teal.6',
    ctr: 'red.6',
  }[analytic];

  const icon = {
    impressions: <IconEyePlus style={{ height: 18 }} />,
    clicks: <IconHandClick style={{ height: 18 }} />,
    ctr: <IconSquareRoundedPercentage style={{ height: 18 }} />,
  }[analytic];

  useEffect(() => {
    setAction(`wp_bannerize_get_${analytic}_trends`);
    setKey(
      `wp_bannerize_get_${analytic}_trends${accuracy}${campaigns.join(
        ',',
      )}${banners.join(',')}`,
    );
  }, [analytic, accuracy, campaigns, banners]);

  useEffect(() => {
    if (data) {
      const parseData = data.map(item => ({
        date:
          accuracy === 'day'
            ? dayjs(item.date).format('MMM D, YYYY')
            : dayjs(item.date).format('MMM YYYY'),

        [analytic]: +item[analytic],
      }));

      setParseData(parseData);
    }
  }, [data]);

  return (
    <Fieldset
      mt={16}
      radius={16}
      legend={
        <Badge size="lg" color={color}>
          <Group gap={4}>
            {icon}
            {title}
          </Group>
        </Badge>
      }>
      <Stack mt={16} mih={300}>
        {isLoading || !parseData ? (
          <Center h={320}>
            <Loader />
          </Center>
        ) : null}
        {!isLoading && parseData && (
          <>
            <Group grow>
              <Group>
                <SegmentedControl
                  radius="xl"
                  size="xs"
                  data={[
                    {
                      value: 'line',
                      label: (
                        <Center style={{ gap: 10 }}>
                          <IconChartAreaLineFilled
                            style={{
                              width: rem(16),
                              height: rem(16),
                              color: theme.colors.blue[6],
                            }}
                          />
                          <span>{__('Line', 'wp-bannerize')}</span>
                        </Center>
                      ),
                    },
                    {
                      value: 'bar',
                      label: (
                        <Center style={{ gap: 10 }}>
                          <IconChartBar
                            style={{
                              width: rem(16),
                              height: rem(16),
                              color: theme.colors.blue[6],
                            }}
                          />
                          <span>{__('Bar', 'wp-bannerize')}</span>
                        </Center>
                      ),
                    },
                  ]}
                  value={chart}
                  onChange={setChart}
                />
                <SegmentedControl
                  radius="xl"
                  size="xs"
                  value={accuracy}
                  onChange={setAccuracy}
                  data={[
                    {
                      value: 'day',
                      label: (
                        <Center style={{ gap: 10 }}>
                          <IconCalendar
                            style={{
                              width: rem(16),
                              height: rem(16),
                              color: theme.colors.blue[6],
                            }}
                          />
                          <span>{__('Day', 'wp-bannerize')}</span>
                        </Center>
                      ),
                    },
                    {
                      value: 'month',
                      label: (
                        <Center style={{ gap: 10 }}>
                          <IconCalendarMonth
                            style={{
                              width: rem(16),
                              height: rem(16),
                              color: theme.colors.blue[6],
                            }}
                          />
                          <span>{__('Month', 'wp-bannerize')}</span>
                        </Center>
                      ),
                    },
                  ]}
                />
                <Menu shadow="md" withArrow>
                  <Menu.Target>
                    <Button
                      variant="outline"
                      size="xs"
                      rightSection={<IconSelect style={{ width: 14 }} />}>
                      {__('Tools', 'wp-bannerize')}
                    </Button>
                  </Menu.Target>
                  <Menu.Dropdown>
                    <Menu.Label>{__('Charts', 'wp-bannerize')}</Menu.Label>
                    <Menu.Item
                      onClick={async () => {
                        downloadCSV(parseData, analytic);
                      }}
                      leftSection={
                        <IconFileTypeCsv
                          width={18}
                          color={theme.colors.blue[6]}
                        />
                      }>
                      {__('Export CSV', 'wp-bannerize')}
                    </Menu.Item>
                    <Menu.Item
                      leftSection={
                        <IconRefresh width={18} color={theme.colors.blue[6]} />
                      }
                      onClick={async () => {
                        await mutate();
                      }}>
                      {__('Refresh', 'wp-bannerize')}
                    </Menu.Item>
                  </Menu.Dropdown>
                </Menu>
              </Group>

              <CampaignsMultiSelect
                campaigns={campaigns}
                onChange={setCampaigns}
              />
              <BannersMultiSelect banners={banners} onChange={setBanners} />
            </Group>
            <>
              {chart === 'line' && (
                <AreaChart
                  h={300}
                  data={parseData}
                  dataKey="date"
                  series={[{ name: analytic, color }]}
                  xAxisLabel="Date"
                  yAxisLabel="Amount"
                  unit={analytic === 'ctr' ? '%' : undefined}
                  curveType="linear"
                />
              )}
              {chart === 'bar' && (
                <BarChart
                  h={300}
                  data={parseData}
                  dataKey="date"
                  series={[{ name: analytic, color }]}
                  unit={analytic === 'ctr' ? '%' : undefined}
                  curveType="natural"
                />
              )}
            </>
          </>
        )}
      </Stack>
    </Fieldset>
  );
}