import { useQuery } from 'react-query';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import DonutChart from '@material-hu/components/design-system/Charts/DonutChart';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import useFormatDate from 'src/hooks/useFormatDate';
import { getPeopleSummaryByStatus } from 'src/services/insightsService';
import { FeatureFlags } from 'src/types/featureFlags';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { insightsKeys } from '../../queries';
import { getRoundPercentage } from '../../utils';

const CircleStatus = ({ color }: { color: string }) => (
  <div
    style={{
      marginTop: '8px',
      minWidth: '12px',
      height: '12px',
      borderRadius: '100%',
      backgroundColor: color,
    }}
  />
);

const PeopleChartSkeletonLoader = () => {
  return (
    <Stack sx={{ gap: 2 }}>
      <HuSkeleton sx={{ width: '100%', height: '40px' }} />
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 2,
          width: '100%',
          height: '260px',
        }}
      >
        <HuSkeleton sx={{ width: '50%', height: '100%' }} />
        <Stack sx={{ width: '50%', gap: 2, height: '100%' }}>
          <HuSkeleton sx={{ height: '30%' }} />
          <HuSkeleton sx={{ height: '70%' }} />
        </Stack>
      </Stack>
    </Stack>
  );
};

const PeopleStatusChart = () => {
  const { palette } = useTheme();
  const { formatDate } = useFormatDate();
  const { t } = useLokaliseTranslation('insights');
  const isArgusEnabled = useFeatureFlag(FeatureFlags.ARGUS_ENABLED);

  const { data, isLoading } = useQuery(
    insightsKeys.peopleSummatyByStatus(),
    () => getPeopleSummaryByStatus(isArgusEnabled),
    { select: response => response.data },
  );

  const totalUsers = data
    ? data.activeAmount + data.unclaimedAmount + data.deactivatedAmount
    : 0;

  return (
    <HuCardContainer
      padding={24}
      sx={{ width: '100%' }}
    >
      {isLoading ? (
        <PeopleChartSkeletonLoader />
      ) : (
        <Stack sx={{ gap: 2 }}>
          <HuTitle
            variant="M"
            title={t('PEOPLE_TAB.USERS_BY_STATUS')}
          />
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 4,
              width: '100%',
            }}
          >
            <Stack sx={{ maxWidth: 250 }}>
              <DonutChart
                type="doughnut"
                data={{
                  datasets: [
                    {
                      data: [
                        data?.activeAmount ?? 0,
                        data?.unclaimedAmount ?? 0,
                        data?.deactivatedAmount ?? 0,
                      ],
                      backgroundColor: [
                        palette.graphics?.successText,
                        palette.ilustrations?.warnIlus,
                        palette.graphics?.neutralGraphic,
                      ],
                      hoverOffset: 1,
                      borderWidth: 0,
                    },
                  ],
                }}
                options={{
                  plugins: {
                    legend: { display: false },
                    tooltip: {
                      callbacks: {
                        title: () => formatDate(new Date(), 'dd MMMM yyyy'),
                        label: ({ dataset, dataIndex }) => {
                          const value = dataset.data[dataIndex];
                          const indexToTooltip = {
                            0: t('PEOPLE_TAB.ACTIVATED_AMOUNT', {
                              count: value,
                            }),
                            1: t('PEOPLE_TAB.UNCLAIMED_AMOUNT', {
                              count: value,
                            }),
                            2: t('PEOPLE_TAB.DEACTIVATED_AMOUNT', {
                              count: value,
                            }),
                          };

                          const percentage = getRoundPercentage(
                            value,
                            totalUsers,
                            2,
                          );
                          return `${indexToTooltip[dataIndex as keyof typeof indexToTooltip]} | ${percentage}%`;
                        },
                      },
                    },
                    // @ts-expect-error Runtime plugin augmentation issue with Chart.register()
                    datalabels: { display: false },
                  },
                }}
              />
            </Stack>
            <Stack sx={{ gap: 3, width: '50%', maxWidth: '470px' }}>
              <HuTitle
                variant="L"
                copetin={t('PEOPLE_TAB.USERS_TOTAL')}
                title={`${totalUsers}`}
              />
              <Stack sx={{ gap: 2 }}>
                <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
                  <CircleStatus color={palette.graphics?.successText!} />
                  <HuTitle
                    variant="M"
                    title={t('PEOPLE_TAB.ACTIVATED_AMOUNT', {
                      count: data?.activeAmount,
                    })}
                    description={t('PEOPLE_TAB.ACTIVATED_INFO')}
                  />
                </Stack>
                <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
                  <CircleStatus color={palette.ilustrations?.warnIlus!} />
                  <HuTitle
                    variant="M"
                    title={t('PEOPLE_TAB.UNCLAIMED_AMOUNT', {
                      count: data?.unclaimedAmount,
                    })}
                    description={t('PEOPLE_TAB.UNCLAIMED_INFO')}
                  />
                </Stack>
                {!!data?.deactivatedAmount && (
                  <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
                    <CircleStatus color={palette.graphics?.neutralGraphic!} />
                    <HuTitle
                      variant="M"
                      title={t('PEOPLE_TAB.DEACTIVATED_AMOUNT', {
                        count: data?.deactivatedAmount,
                      })}
                      description={t('PEOPLE_TAB.DEACTIVATED_INFO')}
                    />
                  </Stack>
                )}
              </Stack>
            </Stack>
          </Stack>
        </Stack>
      )}
    </HuCardContainer>
  );
};

export default PeopleStatusChart;