import React from 'react';
import { Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography } from '@mui/material';

import styles from '../styles/stylesheet';
import GridView from './Grid';
import { CustomDialogProps } from '../types';

const DialogComponent = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
  const words = contentText.split(' ');

  const copyMnemonic = () => {
    navigator.clipboard.writeText(contentText)
  };

  return (
    <Dialog open={visible} onClose={hideDialog}>
      <DialogTitle>Mnemonic</DialogTitle>
      <DialogContent>
        <Typography variant="h6" component="div" style={{ color: 'rgba(0, 0, 0, 0.87)' }}>
          Your mnemonic provides full access to your wallet and funds. Make sure to note it down.
        </Typography>
        <Typography variant="h6" component="div" style={{ ...styles.dialogWarning }}>
          Do not share your mnemonic with anyone
        </Typography>
        <GridView words={words} />
      </DialogContent>
      <DialogActions>
        <Button onClick={copyMnemonic}>Copy</Button>
        <Button onClick={hideDialog}>Done</Button>
      </DialogActions>
    </Dialog>
  );
};

export { DialogComponent };