import { IconInfoCircle } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { type Competency } from 'src/types/competencies';
import { useLokaliseTranslation } from 'src/utils/i18n';

import SelectedCompetencyItem from './components/SelectedCompetencyItem';

type CompetenciesStepContentProps = {
  onRemoveCompetency: (competencyIndex: number) => void;
  formCompetencies: Competency[];
};

const CompetenciesStepContent = (props: CompetenciesStepContentProps) => {
  const { onRemoveCompetency, formCompetencies } = props;
  const { t } = useLokaliseTranslation('competencies');

  const handleRemoveCompetency = (competencyId: number) => {
    onRemoveCompetency(
      formCompetencies.findIndex(competency => competency.id === competencyId),
    );
  };

  return (
    <Stack sx={{ gap: 2, height: '100vh' }}>
      <HuTitle
        title={t('competencies')}
        description={t('added_competencies', {
          count: formCompetencies.length,
        })}
        variant="L"
      />
      {formCompetencies.length === 0 && (
        <HuStateCard
          slotProps={{
            title: {
              title: t('profile_with_empty_competencies.title'),
              description: t('profile_with_empty_competencies.description'),
            },
            avatar: {
              Icon: IconInfoCircle,
              color: 'primary',
            },
          }}
        />
      )}
      {formCompetencies.length > 0 && (
        <HuCardContainer
          fullWidth
          sx={{ '.MuiCardContent-root': { p: 3 } }}
        >
          <Stack
            sx={{
              backgroundColor: theme => theme.palette.newBase?.grey[50],
              borderRadius: 2,
            }}
          >
            {formCompetencies.map((competency, index) => (
              <Stack key={competency.id}>
                <SelectedCompetencyItem
                  competency={competency}
                  onRemove={handleRemoveCompetency}
                />
                {index < formCompetencies.length - 1 && <Divider />}
              </Stack>
            ))}
          </Stack>
        </HuCardContainer>
      )}
    </Stack>
  );
};

export default CompetenciesStepContent;