import { FC, useState } from 'react';

import CircularProgress from '@material-hu/mui/CircularProgress';
import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogContentText from '@material-hu/mui/DialogContentText';
import DialogTitle from '@material-hu/mui/DialogTitle';
import TextField from '@material-hu/mui/TextField';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useTranslation } from './i18n';

export type CredentialsDialogProps = {
  open: boolean;
  onClose: () => void;
  onClick: any;
  isLoading?: boolean;
};

export const CredentialsDialog: FC<CredentialsDialogProps> = props => {
  const { open, onClose, onClick, isLoading = false } = props;

  const { t } = useTranslation();

  const [employeeId, setEmployeeId] = useState('');

  const handleButtonClick = id => onClick(id);

  return (
    <Dialog
      open={open}
      onClose={onClose}
    >
      <DialogTitle>{t('EMPLOYEE_CREDENTIALS')}</DialogTitle>
      <DialogContent>
        <DialogContentText>{t('CREDENTIALS_REGISTER_STEP')}</DialogContentText>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label={t('MEMBERSHIP_NUMBER')}
          fullWidth
          variant="standard"
          onChange={event => setEmployeeId(event.target.value)}
        />
      </DialogContent>
      <DialogActions>
        <Button
          disabled={isLoading}
          onClick={() => handleButtonClick(employeeId)}
          sx={{ display: 'flex', alignItems: 'center' }}
        >
          {isLoading && (
            <CircularProgress
              size={20}
              sx={{ mr: 0.6 }}
            />
          )}
          {t('START_REGISTRATION')}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CredentialsDialog;