import { Center, Loader, Tabs, rem, useMantineTheme } from '@mantine/core';
import {
  IconBrush,
  IconChartAreaLineFilled,
  IconGlobeFilled,
} from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import { Suspense } from 'react';

import Analytics from './AnalyticsSettings';
import GEO from './GeoSettings';
import Theme from './ThemeSettings';

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

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

  return (
    <Tabs
      my={16}
      mr={16}
      variant="outline"
      defaultValue="analytics"
      keepMounted={false}>
      <Tabs.List>
        <Tabs.Tab
          value="analytics"
          leftSection={<IconChartAreaLineFilled style={iconStyle} />}>
          {__('Analytics', 'wp-bannerize')}
        </Tabs.Tab>
        <Tabs.Tab
          value="geo"
          leftSection={<IconGlobeFilled style={iconStyle} />}>
          {__('Geo Location', 'wp-bannerize')}
        </Tabs.Tab>
        <Tabs.Tab value="theme" leftSection={<IconBrush style={iconStyle} />}>
          {__('Theme', 'wp-bannerize')}
        </Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="analytics">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <Analytics />
        </Suspense>
      </Tabs.Panel>

      <Tabs.Panel value="geo">
        <Suspense
          fallback={
            <Center>
              <Loader />
            </Center>
          }>
          <GEO />
        </Suspense>
      </Tabs.Panel>

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