import React from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import { Button, Modal } from '../components'
import { Box, Typography } from '@mui/material'

const meta = {
  title: 'Layout/Modal',
  component: Modal,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Modal>

export default meta

export const ModalBasic = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalBasic.storyName = 'Modal Basic'

export const ModalTitle = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)
  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          title="Title Modal"
          description="Description Modal"
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalTitle.storyName = 'Modal Title'

export const ModalAction = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  const defaultAction = [
    {
      label: 'Cancelar',
      action: handleClose,
      color: 'error',
      size: 'medium',
      variant: 'outlined',
    },
    {
      label: 'Confirmar',
      action: handleClose,
      color: 'primary',
      size: 'medium',
      variant: 'contained',
    },
  ]
  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          action={defaultAction}
          paperProps={{
            sx: {
              width: '90vw',
            },
          }}
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalAction.storyName = 'Modal Action'

export const ModalProps = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  const defaultAction = [
    {
      label: 'Cancelar',
      action: handleClose,
      color: 'error',
      size: 'medium',
      variant: 'outlined',
    },
    {
      label: 'Confirmar',
      action: handleClose,
      color: 'primary',
      size: 'medium',
      variant: 'contained',
    },
  ]
  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          action={defaultAction}
          title="Select a company"
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalProps.storyName = 'Modal Title and Action'

export const ModalSize = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  const defaultAction = [
    {
      label: 'Cancelar',
      action: handleClose,
      color: 'error',
      size: 'medium',
      variant: 'outlined',
    },
    {
      label: 'Confirmar',
      action: handleClose,
      color: 'primary',
      size: 'medium',
      variant: 'contained',
    },
  ]
  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          action={defaultAction}
          title="Select a company"
          width="90vw"
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalSize.storyName = 'Modal width and height'

export const ModalOutsideClick = () => {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  const defaultAction = [
    {
      label: 'Cancelar',
      action: handleClose,
      color: 'error',
      size: 'medium',
      variant: 'outlined',
    },
    {
      label: 'Confirmar',
      action: handleClose,
      color: 'primary',
      size: 'medium',
      variant: 'contained',
    },
  ]
  return (
    <>
      <Button onClick={handleOpen} color="primary" variant="outlined">
        Open modal
      </Button>

      {open && (
        <Modal
          open={open}
          shouldNotCloseOnOutsideClick={true}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          action={defaultAction}
          title="Select a company"
          width="90vw"
        >
          <>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </>
        </Modal>
      )}
    </>
  )
}

ModalOutsideClick.storyName = 'Modal custom outside click behaviour'