import { Button, TextField, Typography } from '@mui/material';

import { handleCopy } from '../../../utils';
import Dialog from '../../common/Dialog';
import { notify } from '../../common/notify';

interface Props {
  onClose: () => void;
  open: boolean;
  publicKey: string;
}

export const CopySshKeyDialog = ({ open, publicKey, onClose }: Props) => {
  const onCopy = async () => {
    const copied = await handleCopy(publicKey);
    if (copied) {
      notify.success('Public key copied to clipboard.');
    } else {
      notify.error('Could not copy the public key.');
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title="SSH Key"
      size="sm"
      fullWidth
      actionButtons={
        <Button onClick={onClose} variant="outlined" color="inherit">
          Close
        </Button>
      }
    >
      <Typography variant="subtitle2">Public key</Typography>
      <Typography variant="body2" sx={{ mb: 1 }}>
        Copy this key into the setting of your git provider, for example, Github.
      </Typography>
      <TextField
        value={publicKey}
        variant="outlined"
        multiline
        fullWidth
        minRows={3}
        slotProps={{ input: { readOnly: true } }}
        sx={{
          '& .MuiInputBase-root': { backgroundColor: 'transparent' },
          '& textarea': { backgroundColor: 'transparent' }
        }}
      />
      <Button sx={{ mt: 1 }} variant="outlined" color="inherit" onClick={onCopy}>
        Copy to clipboard
      </Button>
    </Dialog>
  );
};
