import { useState } from 'react';

import Edit from '@material-hu/icons/material/Edit';
import Skeleton from '@material-hu/mui/Skeleton';
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 { CalcMethod } from 'src/types/peopleExperience';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useSurveyDetail from '../hooks/useSurveyDetail';

import CalcMethodSidebar from './CalcMethodSidebar';

type CalcMethodUpdateButtonProps = {
  surveyId: number | null;
};

export const CalcMethodUpdateButton = ({
  surveyId,
}: CalcMethodUpdateButtonProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const [openSidebar, setOpenSidebar] = useState(false);
  const { data: survey, isLoading: isLoadingSurvey } = useSurveyDetail(
    surveyId ?? undefined,
  );

  const calcFormatTransMap = {
    [CalcMethod.LINEAL]: t('CLASSIC_METHOD'),
    [CalcMethod.ADVANCED]: t('ADVANCED_METHOD'),
  };

  const handleCloseSidebar = () => setOpenSidebar(false);

  const handleEditScoreMethod = () => setOpenSidebar(true);

  if (isLoadingSurvey) {
    return <Skeleton sx={{ height: '1.5rem', mt: 2 }} />;
  }

  return (
    <>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          py: 2,
        }}
      >
        <Typography sx={{ flex: '1 1 0' }}>
          {t('SCORE_METHOD_LABEL')}
        </Typography>
        <Typography
          sx={{
            fontWeight: theme => theme.typography.fontWeightMedium,
          }}
        >
          {survey?.topicsCalculationMethod
            ? calcFormatTransMap[survey.topicsCalculationMethod]
            : null}
        </Typography>
        <Button
          onClick={handleEditScoreMethod}
          endIcon={<Edit />}
          variant="outlined"
          size="small"
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.elements.default,
          }}
        >
          {t('general:edit')}
        </Button>
      </Stack>
      <CalcMethodSidebar
        open={openSidebar}
        onClose={handleCloseSidebar}
        surveyId={surveyId}
      />
    </>
  );
};

export default CalcMethodUpdateButton;