import React from 'react';

import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import { Trans } from '@lingui/macro';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import CloseIcon from '@mui/icons-material/Close';
import styled from 'styled-components';

const SubmitButton = styled(Button)`
  margin-top: 1em !important;
`;

type FormDialogProps = {
  appendForm: () => void;
  open: boolean;
  setIsFormOpen: (boolean) => void;
  name: string;
  handleSave: () => void;
  isReady: boolean;
  isFullScreen: boolean;
};
const FormDialog = (props: FormDialogProps) => {
  const {
    appendForm,
    open,
    setIsFormOpen,
    name,
    handleSave,
    isReady,
    isFullScreen
  } = props;
  const closeIconView = isFullScreen ? <ArrowBackIcon /> : <CloseIcon />;
  const closeDialog = () => setIsFormOpen(false);
  return (
    <Dialog
      fullScreen={isFullScreen}
      open={open}
      onClose={closeDialog}
      TransitionProps={{onEntered: appendForm}}
    >
      <AppBar style={{ position: 'relative' }} className={'bg-header'}>
        <Toolbar>
          <IconButton
            edge='start'
            color='inherit'
            onClick={() => setIsFormOpen(false)}
            size='large'
          >
            {closeIconView}
          </IconButton>
          <Typography variant='h6'>{name}</Typography>
        </Toolbar>
      </AppBar>
      <DialogContent>
        <div id='form'></div>
        <SubmitButton
          onClick={handleSave}
          variant='contained'
          disabled={isReady}
          color='primary'
          fullWidth
        >
          <Trans>Send</Trans>
        </SubmitButton>
      </DialogContent>
    </Dialog>
  );
};

export default FormDialog;