import { FC } from 'react';

import { IconEdit, IconX } from '@material-hu/icons/tabler';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import IconButton from '@material-hu/mui/IconButton';
import Radio from '@material-hu/mui/Radio';
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 { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type PollReadOnlyProps = {
  options: string[];
  onEdit?: () => void;
  onRemove?: () => void;
};

const PollReadOnly: FC<PollReadOnlyProps> = ({ options, onEdit, onRemove }) => {
  const { t } = useTranslation(['post', 'general']);

  return (
    <Stack sx={{ mt: 2, mb: 0.5, gap: 2 }}>
      {/* Poll Title */}
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
      >
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
          color={theme => theme.palette.new.text.neutral.default}
        >
          {t('post:poll')}
        </Typography>
        {onRemove && (
          <IconButton
            onClick={onRemove}
            size="small"
          >
            <IconX />
          </IconButton>
        )}
      </Stack>

      {/* Poll Options */}
      {options.map(option => (
        <Card
          key={option}
          sx={{
            boxShadow: 'none',
            cursor: 'default',
            border: '1px solid',
            borderColor: theme => theme.palette.new.border.neutral.default,
            borderRadius: theme => theme.shape.borderRadiusL,
            px: 2,
            py: 1.5,
            backgroundColor: 'new.background.elements.overlay',
          }}
        >
          <CardContent sx={{ p: 0, '&:last-child': { pb: 0 } }}>
            <Stack
              direction="row"
              alignItems="center"
              gap={1}
            >
              <Radio
                checked={false}
                disabled
                sx={{ p: 0 }}
              />
              <Typography
                variant="body1"
                color={theme => theme.palette.new.text.neutral.default}
              >
                {option}
              </Typography>
            </Stack>
          </CardContent>
        </Card>
      ))}

      {/* Edit Button */}
      {onEdit && (
        <Stack
          direction="row"
          justifyContent="center"
        >
          <Button
            variant="outlined"
            fullWidth
            onClick={onEdit}
            startIcon={<IconEdit />}
            sx={{ py: 2.5 }}
          >
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('general:edit')}
            </Typography>
          </Button>
        </Stack>
      )}
    </Stack>
  );
};

export default PollReadOnly;