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 = {
  options: { value: string; id: string }[];
  remove?: Function;
  addNewOption?: (index?: number, description?: string) => void;
  type: ReviewQuestionType;
};

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

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