import { useQuery } from 'react-query';

import MenuItem from '@material-hu/mui/MenuItem';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { goalsKeys } from 'src/pages/dashboard/Goals/queries';
import { getGoalCycles } from 'src/services/goalsService';
import { GoalCycleStatuses } from 'src/types/goals';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatUTCDate } from 'src/utils/timeUtils';

import FormSelect from 'src/components/FormInputs/FormSelect';
import GoalCycleStatus from 'src/components/GoalCycleStatus';

import { useCycleEditRestrictions } from '../../context/useCycleEditRestrictions';

type CycleOption = {
  label: string;
  value: string | number;
  date: string;
  status: GoalCycleStatuses;
};

const renderMenuItem = (option: CycleOption) => (
  <MenuItem
    key={option.value}
    value={option.value}
  >
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <Stack>
        <Typography variant="body2">{option.label}</Typography>
        <Typography
          variant="body2"
          sx={{ color: 'text.secondary' }}
        >
          {option.date}
        </Typography>
      </Stack>
      <GoalCycleStatus status={option.status} />
    </Stack>
  </MenuItem>
);

const GoalStep = () => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const { disableRestrictedFields } = useCycleEditRestrictions();

  const cyclePagination = { page: 0, limit: 50 };

  const { data: cycles, isLoading } = useQuery(
    goalsKeys.cycles(cyclePagination),
    () => getGoalCycles(cyclePagination),
    {
      select: response => response.data.items,
    },
  );

  const cyclesList =
    cycles
      ?.filter(c => c.status !== GoalCycleStatuses.DRAFT)
      ?.map(c => ({
        label: c.name,
        value: c.id,
        date: `${t('GENERAL:START')} ${formatUTCDate(c.startDate)} • ${t('GENERAL:END')} ${formatUTCDate(c.endDate)}`,
        status: c.status,
      })) || [];

  const renderItemCategory = () => cyclesList?.map(renderMenuItem);

  return (
    <Stack sx={{ gap: 2, pb: 2 }}>
      <Typography variant="h4">{t('form.cycle_steps.goals.title')}</Typography>
      <Typography
        variant="body2"
        sx={{ pb: 2 }}
      >
        {t('form.cycle_steps.goals.subtitle')}
      </Typography>
      <Typography variant="subtitle1">
        {t('form.cycle_steps.goals.select_goal_cycle')}
      </Typography>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.grey[100],
          borderRadius: 2,
          p: 3,
        }}
      >
        <FormSelect
          name="goalCycleId"
          label={t('form.cycle_steps.goals.goals_cycle')}
          options={cyclesList}
          loading={isLoading}
          renderMenuItems={renderItemCategory}
          disabled={disableRestrictedFields}
          formControlProps={{
            sx: {
              width: '100%',
            },
          }}
          selectProps={{
            sx: {
              height: '56px',
              backgroundColor: 'white',
            },
          }}
        />
      </Stack>
    </Stack>
  );
};

export default GoalStep;