import AddIcon from '@material-hu/icons/material/Add';
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';

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

import { ReviewQuestionType } from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Option from '../Option';

type Props = {
  name: string;
  questionIndex: number;
  options: Record<'id', string>[];
  remove: Function;
  addNewOption: (index?: number, description?: string) => void;
  type: ReviewQuestionType;
  isGoalQuestion?: boolean;
};

const Options = ({
  isGoalQuestion = false,
  name,
  questionIndex,
  options,
  remove,
  addNewOption,
  type,
}: Props) => {
  const { t } = useLokaliseTranslation('performance');

  return (
    <Stack spacing={2}>
      <Box sx={{ minHeight: 80 }}>
        {options.map((option, index) => (
          <Option
            isGoalQuestion={isGoalQuestion}
            key={option.id}
            name={name}
            type={type}
            last={options.length === 1}
            index={index}
            onRemove={() => remove(index)}
            questionIndex={questionIndex}
          />
        ))}
      </Box>
      <Button
        variant="outlined"
        size="small"
        sx={{ mt: 1 }}
        startIcon={<AddIcon />}
        onClick={() => addNewOption()}
      >
        {t('templates.new_option')}
      </Button>
    </Stack>
  );
};
export default Options;