/**
 * @Move (SQCY)
 * Only used by the Insights module - move to Insights/
 */
import { useFormContext } from 'react-hook-form';

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

import DonutChart from '@material-hu/components/design-system/Charts/DonutChart';

import { AnalyticsTypes } from 'src/types/insights';
import { useAuthorizedAnalyticsWithDetails } from 'src/utils/permissions';

type Props = {
  title: string;
  value: number;
  maxValue?: number;
  stat: AnalyticsTypes;
};

const DashboardAnalyticsCard = ({ title, value, maxValue, stat }: Props) => {
  const theme = useTheme();

  const hasMaxValue = !!maxValue;

  const authorizedAnalytics = useAuthorizedAnalyticsWithDetails();
  const hasDetails = authorizedAnalytics.includes(stat);

  const { setValue } = useFormContext();

  const handleClick = () => setValue('currentModule', stat);

  return (
    <Card
      component={ButtonBase}
      variant="outlined"
      disabled={!hasDetails}
      onClick={handleClick}
      sx={{
        flexDirection: 'column',
        width: '100%',
        alignItems: 'stretch',
        borderRadius: 1,
        height: 180,
        '&:hover': {
          '.hover-color': {
            color: theme.palette.primary.main,
          },
          backgroundColor: theme.palette.action.hover,
        },
      }}
    >
      <Stack
        sx={{
          justifyContent: 'space-evenly',
          alignItems: 'center',
          display: 'flex',
          flexDirection: 'column',
          textAlign: 'center',
          px: 2,
        }}
      >
        {hasMaxValue ? (
          <>
            <Stack sx={{ width: 100, height: 100 }}>
              <DonutChart
                type="doughnut"
                data={{
                  datasets: [
                    {
                      data: [
                        100 * (value / (maxValue || 1)),
                        100 - 100 * (value / (maxValue || 1)),
                      ],
                      backgroundColor: [
                        theme.palette.primary.main,
                        theme.palette.background.default,
                      ],
                    },
                  ],
                }}
                options={{
                  plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false },
                    // @ts-ignore Runtime plugin augmentation issue with Chart.register()
                    datalabels: { display: false },
                  },
                }}
              />
            </Stack>
            <Typography
              sx={{ fontSize: 22, fontWeight: 'bold' }}
              className="hover-color"
            >
              {value}/{maxValue}
            </Typography>
          </>
        ) : (
          <Typography
            sx={{ fontSize: 75, fontWeight: 'bold' }}
            className="hover-color"
          >
            {value}
          </Typography>
        )}
        <Typography
          sx={{ fontWeight: 'semiBold' }}
          variant="globalM"
        >
          {title}
        </Typography>
      </Stack>
    </Card>
  );
};

export default DashboardAnalyticsCard;