import { useState } from 'react';

import { Box, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';

import ConfirmationDialog from '../../common/ConfirmationDialog';
import type { GroupType } from '../types';

interface DuplicateGroupDialogProps {
  canCreateShared: boolean;
  onClose: () => void;
  onConfirm: (targetType: GroupType) => void;
}

export const DuplicateGroupDialog = ({ canCreateShared, onClose, onConfirm }: DuplicateGroupDialogProps) => {
  const [targetType, setTargetType] = useState<GroupType>('personal');

  return (
    <ConfirmationDialog
      open
      onClose={onClose}
      onConfirm={() => onConfirm(targetType)}
      title="Duplicate group"
      confirmColor="primary"
      message="What type of group do you want to make?"
    >
      <RadioGroup value={targetType} sx={{ mt: 1 }} onChange={event => setTargetType(event.target.value as GroupType)}>
        <FormControlLabel
          value="personal"
          control={<Radio />}
          label={
            <Box>
              <Typography>Personal group</Typography>
              <Typography variant="body2" color="text.secondary">
                For you to use in reports &amp; filters. Does not include data and module input.
              </Typography>
            </Box>
          }
        />
        <FormControlLabel
          value="shared"
          disabled={!canCreateShared}
          control={<Radio />}
          label={
            <Box>
              <Typography>Shared group</Typography>
              <Typography variant="body2" color="text.secondary">
                For use by everyone. Includes data and module input.
              </Typography>
            </Box>
          }
        />
      </RadioGroup>
    </ConfirmationDialog>
  );
};
