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

export default function TopMost({ analytic = 'clicks', campaign = false }) {
  const [accuracy, setAccuracy] = useState('day');
  const [parseData, setParseData] = useState();
  const [action, setAction] = useState();
  const [key, setKey] = useState();

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

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

  const byCampaign = campaign ? `_campaign` : '';

  useEffect(() => {
    setAction(`wp_bannerize_overall_top_most_${analytic}${byCampaign}`);
    setKey(`wp_bannerize_overall_top_most_${analytic}${byCampaign}`);
  }, [analytic, accuracy]);

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

  const description = {
    impressions: __('Viewed', 'wp-bannerize'),
    clicks: __('Clicked', 'wp-bannerize'),
    ctr: __('CTR', 'wp-bannerize'),
  }[analytic];

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

  useEffect(() => {
    if (data) {
      const parseData = data.map(item => ({
        ...item,
        [analytic]: +item[analytic],
      }));

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

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

  return (
    <Paper withBorder mt={16} px={16}>
      <Text align="center" size="xl" my={16}>
        5 Top Most {description} {campaign ? 'Campaigns' : 'Banners'}
      </Text>
      <BarChart
        h={300}
        data={parseData}
        dataKey="title"
        orientation="vertical"
        series={[{ name: analytic, color }]}
        yAxisProps={{ width: 80 }}
        barProps={{ radius: 256 }}
        xAxisLabel={title}
        yAxisLabel={
          campaign
            ? __('Campaigns', 'wp-bannerize')
            : __('Banners', 'wp-bannerize')
        }
      />
    </Paper>
  );
}