import {
  Center,
  Grid,
  Loader,
  Tabs,
  rem,
  useMantineTheme,
} from '@mantine/core';
import {
  IconChartBar,
  IconDeviceDesktopAnalytics,
  IconEyePlus,
  IconHandClick,
} from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import { Suspense } from 'react';
import AnalyticsDataTable from './AnalyticsDataTable';
import OverallDonutChart from './OverallDonutChart';
import Reports from './Reports';
import TopMost from './TopMost';

export const AnalyticsTabs = () => {
  const theme = useMantineTheme();

  const iconStyle = {
    height: rem(16),
    width: rem(16),
    color: theme.colors.blue[6],
  };

  return (
    <Tabs
      mt={16}
      mr={16}
      variant="outline"
      defaultValue="overview"
      keepMounted={false}>
      <Tabs.List>
        <Tabs.Tab
          value="overview"
          leftSection={<IconDeviceDesktopAnalytics style={iconStyle} />}>
          {__('Overview', 'wp-bannerize')}
        </Tabs.Tab>
        <Tabs.Tab
          value="impressions"
          leftSection={<IconEyePlus style={iconStyle} />}>
          {__('Impressions', 'wp-bannerize')}
        </Tabs.Tab>
        <Tabs.Tab
          value="clicks"
          leftSection={<IconHandClick style={iconStyle} />}>
          {__('Clicks', 'wp-bannerize')}
        </Tabs.Tab>
        <Tabs.Tab
          value="reports"
          leftSection={<IconChartBar style={iconStyle} />}>
          {__('Reports', 'wp-bannerize')}
        </Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="overview">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <Grid>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <OverallDonutChart analytic="impressions" />
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <OverallDonutChart />
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <TopMost analytic="impressions" />
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <TopMost />
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <TopMost analytic="impressions" campaign />
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <TopMost analytic="clicks" campaign />
            </Grid.Col>
          </Grid>
        </Suspense>
      </Tabs.Panel>

      <Tabs.Panel value="impressions">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <AnalyticsDataTable analytic="impressions" />
        </Suspense>
      </Tabs.Panel>

      <Tabs.Panel value="clicks">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <AnalyticsDataTable />
        </Suspense>
      </Tabs.Panel>

      <Tabs.Panel value="reports">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <Reports />
        </Suspense>
      </Tabs.Panel>
    </Tabs>
  );
};