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

import { meanBy, sumBy } from 'lodash-es';
import Card from '@material-hu/mui/Card';
import CardActions from '@material-hu/mui/CardActions';
import Chip from '@material-hu/mui/Chip';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import SingleStackedBarChart from '@material-hu/components/composed-components/charts/SingleStackedBarChart';
import Button from '@material-hu/components/design-system/Buttons/Button';

import useTopicsStats from 'src/hooks/queryHooks/useTopicsStats';
import { insightsRoutes } from 'src/pages/dashboard/Insights/routes';
import { AnalyticsTypes } from 'src/types/insights';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatMinutesToDuration } from 'src/utils/timeUtils';

import CenteredCircularProgress from 'src/components/CircularProgress';

const CHART_HEIGHT = 60;

type Props = {
  showButton?: boolean;
};

const TopicsAnalyticsWidget = ({ showButton }: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');
  const navigate = useNavigate();

  const form = useFormContext();
  const { minDate, maxDate } = form?.watch() || {};
  const pagination = {
    page: 0,
    limit: 25,
  };

  const { isLoading, data: myData } = useTopicsStats(
    minDate,
    maxDate,
    pagination,
    {
      select: ({ data }) => {
        const validAveragesBeforeAssignment = data.filter(
          d => d.averageMinutesBeforeAssignment,
        );
        const meanValidAveragesBeforeAssignment =
          meanBy(
            validAveragesBeforeAssignment,
            'averageMinutesBeforeAssignment',
          ) || 0;
        return {
          totalUnassigned: sumBy(data, 'unassignedCount'),
          totalAssigned: sumBy(data, 'assignedCount'),
          totalFinished: sumBy(data, 'finishedCount'),
          totalSad: sumBy(data, 'sadCount'),
          totalNormal: sumBy(data, 'normalCount'),
          totalHappy: sumBy(data, 'happyCount'),
          meanAssignmentTime: formatMinutesToDuration(
            meanValidAveragesBeforeAssignment,
          ),
        };
      },
      refetchOnMount: false,
      keepPreviousData: true,
    },
  );

  const chipStyle = {
    height: '2.5rem',
    minWidth: '4rem',
    color: 'white',
    fontSize: '1rem',
  };

  if (isLoading) {
    return <CenteredCircularProgress centered />;
  }

  return (
    <Card variant="outlined">
      <Grid
        container
        columns={{
          xs: 1,
          md: 3,
        }}
      >
        <Grid
          item
          xs={1}
          sx={{
            borderRight: theme => ({
              md: `1px solid ${theme.palette.divider}`,
            }),
            borderBottom: theme => ({
              md: 'none',
              xs: `1px solid ${theme.palette.divider}`,
            }),
            p: 1,
            textAlign: 'center',
          }}
        >
          <Typography
            color="textSecondary"
            variant="overline"
          >
            {t('backoffice_only:topics_analytics_widget.global_counter')}
          </Typography>
          <Stack
            direction="row"
            spacing={3}
            sx={{ justifyContent: 'center', alignItems: 'center' }}
          >
            <Stack>
              <Chip
                label={myData?.totalUnassigned}
                style={{ ...chipStyle, backgroundColor: '#de363a' }}
              />
              <Typography
                color="textSecondary"
                variant="overline"
              >
                {t('backoffice_only:topics_analytics_widget.unassigned')}
              </Typography>
            </Stack>
            <Stack>
              <Chip
                label={myData?.totalAssigned}
                style={{ ...chipStyle, backgroundColor: '#f6ab00' }}
              />
              <Typography
                color="textSecondary"
                variant="overline"
              >
                {t('backoffice_only:topics_analytics_widget.assigned')}
              </Typography>
            </Stack>
            <Stack>
              <Chip
                label={myData?.totalFinished}
                style={{ ...chipStyle, backgroundColor: '#19c4b1' }}
              />
              <Typography
                color="textSecondary"
                variant="overline"
              >
                {t('backoffice_only:topics_analytics_widget.finished')}
              </Typography>
            </Stack>
          </Stack>
        </Grid>
        <Grid
          item
          xs={1}
          sx={{
            borderBottom: theme => ({
              md: 'none',
              xs: `1px solid ${theme.palette.divider}`,
            }),
            p: 1,
            textAlign: 'center',
          }}
        >
          <Typography
            color="textSecondary"
            variant="overline"
          >
            {t('backoffice_only:topics_analytics_widget.assignment_time')}
          </Typography>
          <Stack
            sx={{ height: { md: CHART_HEIGHT }, justifyContent: 'center' }}
          >
            <Typography
              color="textPrimary"
              variant="h3"
            >
              {myData?.meanAssignmentTime || '-'}
            </Typography>
          </Stack>
        </Grid>
        <Grid
          item
          xs={1}
          sx={{
            borderLeft: theme => ({
              md: `1px solid ${theme.palette.divider}`,
            }),
            borderBottom: theme => ({
              md: 'none',
              xs: `1px solid ${theme.palette.divider}`,
            }),
            p: 1,
            textAlign: 'center',
          }}
        >
          <Typography
            color="textSecondary"
            variant="overline"
          >
            {t('backoffice_only:topics_analytics_widget.satisfaction')}
          </Typography>
          <SingleStackedBarChart
            data={[
              { label: '😡', color: '#de363a', value: myData?.totalSad || 0 },
              {
                label: '😐',
                color: '#f6ab00',
                value: myData?.totalNormal || 0,
              },
              { label: '😁', color: '#19c4b1', value: myData?.totalHappy || 0 },
            ]}
            showLegend
            showDataLabel
            showDataLabelPercentage
            height={CHART_HEIGHT}
          />
        </Grid>
      </Grid>
      {showButton && (
        <CardActions
          sx={{ borderTopStyle: 'solid', borderColor: 'divider', p: 0 }}
        >
          <Button
            fullWidth
            onClick={() =>
              navigate(insightsRoutes.base(), {
                state: { type: AnalyticsTypes.TICKETS },
              })
            }
          >
            {t('backoffice_only:topics_analytics_widget.see_more')}
          </Button>
        </CardActions>
      )}
    </Card>
  );
};

export default TopicsAnalyticsWidget;