import { type FC } from 'react';

import Grid from '@material-hu/mui/Grid';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';

import { type AvatarProps } from '@material-hu/components/design-system/Avatar';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type QuestionType, QuestionTypeGroup } from '../../../../types';
import { QuestionGroups } from '../../../constants';

import GroupTypeList from './GroupTypeList';

type Props = {
  onChooseQuestionType: (questionType: QuestionType) => void;
};

const QuestionTypeMenu: FC<Props> = ({ onChooseQuestionType }) => {
  const { t } = useLokaliseTranslation('service_management');

  const rows = [
    [QuestionTypeGroup.GENERAL, QuestionTypeGroup.INFO],
    [QuestionTypeGroup.CHOICE, QuestionTypeGroup.INTERACTION],
  ];

  return (
    <Grid
      component={Paper}
      elevation={24}
      container
      spacing={3}
      sx={{ p: 3, width: '630px', maxHeight: '666px', overflow: 'auto' }}
    >
      {rows.map((row, rowIndex) => (
        <Grid
          key={rowIndex}
          item
          sm={12}
          md={6}
        >
          <Stack sx={{ gap: 1.5 }}>
            {row.map(group => (
              <GroupTypeList
                key={group}
                title={t(`${group}`)}
                types={QuestionGroups[group].types}
                avatarColor={
                  QuestionGroups[group].avatarColor as AvatarProps['color']
                }
                onChooseQuestionType={onChooseQuestionType}
              />
            ))}
          </Stack>
        </Grid>
      ))}
    </Grid>
  );
};

export default QuestionTypeMenu;