// resources\assets\ts\DataPage\FormDialog.tsx
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { RootState } from './rootReducer';
import { clearTable } from './tableSlice';
import { closeFormDialog } from './formSlice';
import { fetchAll } from './dataSlice';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import CloseIcon from '@mui/icons-material/Close';
import Forms from '~t/share/Forms';
import React from 'react';
import { grey } from '@mui/material/colors';

export default function FormDialog() {
  const d = useDispatch();
  const { isOpen, nextFormID, updateID, ergID, agbID, name } = useSelector(
    (s: RootState) => s.form,
    shallowEqual
  );

  const mainFormState = useSelector((s: RootState) => s.mainForm);

  function handleClose() {
    d(closeFormDialog());
    d(clearTable());
    d(fetchAll());
  }

  let par = null;
  if (nextFormID !== null) {
    par = { 'by.id': nextFormID };
  }

  if (updateID !== null) {
    par = { 'by.id': 0, d: { resid: updateID }, ergID };
  }

  const isNewForm = agbID !== null;
  if (isNewForm) {
    par = { 'by.id': agbID };
  }

  return (
    <Dialog open={isOpen} fullWidth maxWidth={'md'}>
      <DialogTitle style={{ backgroundColor: grey[300] }}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}
        >
          <Typography variant='h6'>{name}</Typography>
          <IconButton onClick={handleClose} aria-label='close' size='large'>
            <CloseIcon />
          </IconButton>
        </div>
      </DialogTitle>
      <DialogContent dividers>
        <Forms
          s={mainFormState}
          reset={!isOpen}
          par={par}
          krzl={'jkim'}
          handleClose={handleClose}
          agbID={agbID}
        />
      </DialogContent>
    </Dialog>
  );
}