import React from 'react';

import { getImportsString, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@/mui/components';

function DialogSection() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (event, reason, disableClickOutside) => {
    if (reason && reason === 'backdropClick' && disableClickOutside) {
      return;
    }
    setOpen(false);
  };

  return (
    <Playground
      title="Dialog"
      initialState={[
        {
          type: 'select',
          stateId: 'maxWidth',
          options: ['sm', 'md', 'lg', 'xl', 'x2l', 'x3l', 'x4l'],
          selected: 'lg',
        },
        {
          type: 'checkbox',
          stateId: 'fullScreen',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableEscapeKeyDown',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableClickOutside',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          disableClickOutside: undefined,
          maxWidth: state.fullScreen ? undefined : state.maxWidth,
          fullScreen: state.fullScreen,
        };
        const propsString = getPropsString({
          ...props,
        });

        const importsList = getImportsString([
          [['Dialog', 'DialogTitle', 'DialogContent', 'DialogContent', 'DialogActions', 'Button']],
        ]);

        return {
          component: (
            <>
              <Button variant="outlined" onClick={handleClickOpen}>
                Open simple dialog
              </Button>
              <Dialog
                {...props}
                open={open}
                onClose={(event, reason) => handleClose(event, reason, state.disableClickOutside)}
              >
                <DialogTitle onClose={() => handleClose()}>Set backup account</DialogTitle>
                <DialogContent>
                  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
                  visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used
                  as a placeholder before final copy is available.
                </DialogContent>
                <DialogActions>
                  <Button variant="outlined" size="small" color="primary" onClick={handleClose}>
                    cancel
                  </Button>
                  <Button variant="contained" size="small" color="primary" onClick={handleClose}>
                    apply
                  </Button>
                </DialogActions>
              </Dialog>
            </>
          ),
          code: `${importsList}

const [open, setOpen] = useState(false);

const handleClose = (event, reason) => {
  ${
    state.disableClickOutside
      ? `if (reason && reason === 'backdropClick') {
    return;
  }
  `
      : ''
  }setOpen(false);
};

<Dialog
  open={open}
  onClose={handleClose}
 ${propsString}
>
  <DialogTitle onClose={handleClose}>
    Set backup account
  </DialogTitle>
  <DialogContent>
    In publishing and graphic design, Lorem ipsum is a placeholder text commonly used
    to demonstrate the visual form of a document or a typeface without relying on meaningful
    content. Lorem ipsum may be used as a placeholder before final copy is available.
  </DialogContent>
  <DialogActions>
    <Button variant="outlined" color="primary" onClick={handleClose}>
      Cancel
    </Button>
    <Button variant="contained" color="primary" onClick={handleClose}>
      Apply
    </Button>
  </DialogActions>
</Dialog>`,
        };
      }}
    />
  );
}

export default DialogSection;
