import { useMemo, useCallback, useEffect } from 'react';
import { useFormContext, useFieldArray } from 'react-hook-form';

import { IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { FormValues } from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer';
import RangeItem from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/components/RangeItem';
import { useFormulas } from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/FormulasContext';
import { useRangeTranslations } from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/hooks/useRangeTranslations';
import { MAX_LIMIT_RANGE } from 'src/pages/dashboard/Goals/constants';
import { getRangeDefinitions } from 'src/pages/dashboard/Goals/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const CustomRangesManager = () => {
  const { t } = useLokaliseTranslation('goals');
  const HuGoThemeProvider = useHuGoTheme();
  const { control } = useFormContext<FormValues>();
  const { getRangeLabel } = useRangeTranslations();

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'ranges',
  });

  const { updateFormulas, resetFormulas } = useFormulas();

  const rangeCount = fields?.length;
  const rangeDefinitions = useMemo(
    () => getRangeDefinitions(rangeCount),
    [rangeCount],
  );

  const addRange = useCallback(() => {
    if (rangeCount < MAX_LIMIT_RANGE) {
      append({ mathExpression: '' });
    }
  }, [rangeCount, append]);

  const removeLastRange = useCallback(() => {
    if (rangeCount > 1) {
      remove(rangeCount - 1);
    }
  }, [rangeCount, remove]);

  useEffect(() => {
    if (fields.length === 0) {
      resetFormulas();
    } else {
      updateFormulas(
        fields.map(field => ({
          id: field.id,
          mathExpression: field.mathExpression,
        })),
      );
    }
  }, [fields, updateFormulas, resetFormulas]);

  return (
    <HuGoThemeProvider>
      <HuCardContainer
        fullWidth
        sx={{
          border: 'none',
          backgroundColor: theme => theme?.palette?.hugoBackground?.neutralBg,
        }}
      >
        <Stack
          sx={{
            gap: 2,
            borderBottom: theme =>
              `1px solid ${theme?.palette?.border?.neutralDivider}`,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 2,
            }}
          >
            <Stack>
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                color={theme => theme.palette.textColors?.neutralText}
              >
                {t('ranges.title')}
              </Typography>
              <Typography
                variant="globalXS"
                fontWeight="fontWeightRegular"
                color={theme => theme.palette.textColors?.neutralTextLighter}
              >
                {t('ranges.description')}
              </Typography>
            </Stack>
            {rangeCount < MAX_LIMIT_RANGE && (
              <Stack>
                <Button
                  variant="text"
                  size="small"
                  startIcon={<IconPlus size={16} />}
                  onClick={addRange}
                >
                  {t('ranges.add')}
                </Button>
              </Stack>
            )}
          </Stack>
          <Stack
            sx={{
              overflowY: 'auto',
              maxHeight: 'calc(100vh - 500px)',
              borderTop: theme =>
                `1px solid ${theme?.palette?.border?.neutralDivider}`,
            }}
          >
            {rangeDefinitions.map((range, index) => {
              const isLast = index === rangeCount - 1;
              const showTrash = rangeCount > 1 && isLast;

              const formulaLabel = getRangeLabel(
                range.start.field,
                range.end?.field || null,
                rangeCount,
                isLast,
              );

              return (
                <RangeItem
                  key={fields[index]?.id || index}
                  index={index}
                  totalRangeCount={rangeCount}
                  formulaLabel={formulaLabel}
                  removeLastRange={removeLastRange}
                  showTrash={showTrash}
                />
              );
            })}
          </Stack>
        </Stack>
      </HuCardContainer>
    </HuGoThemeProvider>
  );
};

export default CustomRangesManager;