import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { useModal } from '../../hooks/useModal';
import { predefinedArgTypes } from '../../utils/storybook';
import { Button } from '../Button/Button';
import { Table } from '../Table/Table/Table';
import { TableBody } from '../Table/TableBody/TableBody';
import { TableCell } from '../Table/TableCell/TableCell';
import { TableHeader } from '../Table/TableHeader/TableHeader';
import { TableHeaderCell } from '../Table/TableHeaderCell/TableHeaderCell';
import { TableRow } from '../Table/TableRow/TableRow';
import { Paragraph } from '../Typography/Paragraph/Paragraph';

import { Modal } from './Modal';

const meta: Meta<typeof Modal> = {
  title: 'UI kit/Modal',
  component: Modal,
  tags: ['autodocs'],
  argTypes: {
    isOpen: {
      control: {
        disable: true,
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof Modal>;

export const Default: Story = {
  args: {
    canBeDismissed: true,
    level: undefined,
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header subheader='Subtitle'>Basic Modal</Modal.Header>
          <Modal.Content>
            <Paragraph>{predefinedArgTypes.string.mapping['"Lorem ipsum" (paragraph)']}</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ secondaryButtonProps, actionButtonProps }) => (
              <>
                <Button {...secondaryButtonProps} onClick={onClose}>
                  Cancel
                </Button>
                <Button {...actionButtonProps} onClick={onClose}>
                  Save & Exit
                </Button>
              </>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithFixedMaxWidth: Story = {
  name: 'With fixed max-width',
  args: {
    canBeDismissed: true,
    maxWidth: true,
    level: undefined,
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header subheader='Subtitle'>Basic Modal</Modal.Header>
          <Modal.Content>
            <Paragraph>{predefinedArgTypes.string.mapping['"Lorem ipsum" (paragraph)']}</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ secondaryButtonProps, actionButtonProps }) => (
              <>
                <Button {...secondaryButtonProps} onClick={onClose}>
                  Cancel
                </Button>
                <Button {...actionButtonProps} onClick={onClose}>
                  Save & Exit
                </Button>
              </>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithoutFooter: Story = {
  args: {
    canBeDismissed: true,
    level: undefined,
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Basic Modal</Modal.Header>
          <Modal.Content>
            <Paragraph>This is a content of this modal. It can be text or whatever else.</Paragraph>
          </Modal.Content>
        </Modal>
      </>
    );
  },
};

export const WithoutTitle: Story = {
  args: {
    canBeDismissed: true,
    level: undefined,
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header />
          <Modal.Content>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHeaderCell>Header cell 1</TableHeaderCell>
                  <TableHeaderCell>Header cell 2</TableHeaderCell>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[1, 2, 3, 4].map(item => (
                  <TableRow key={item}>
                    <TableCell>{`Row ${item}, cell 1`}</TableCell>
                    <TableCell>{`Row ${item}, cell 2`}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Modal.Content>
        </Modal>
      </>
    );
  },
};

export const Notification: Story = {
  args: {
    canBeDismissed: true,
    level: 'success',
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Notification</Modal.Header>
          <Modal.Content>
            <Paragraph>This is a content of this modal. It can be text or whatever else.</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ actionButtonProps }) => (
              <Button {...actionButtonProps} onClick={onClose}>
                Ok
              </Button>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithError: Story = {
  args: {
    canBeDismissed: true,
    level: 'error',
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Are you sure?</Modal.Header>
          <Modal.Content>
            <Paragraph>Are you sure that you want to delete this item?</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ secondaryButtonProps, actionButtonProps }) => (
              <>
                <Button {...secondaryButtonProps} onClick={onClose}>
                  Cancel
                </Button>
                <Button {...actionButtonProps} onClick={onClose}>
                  Confirm
                </Button>
              </>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithAlert: Story = {
  args: {
    canBeDismissed: true,
    level: 'alert',
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Are you sure?</Modal.Header>
          <Modal.Content>
            <Paragraph>Are you sure that you want to delete this item?</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ secondaryButtonProps, actionButtonProps }) => (
              <>
                <Button {...secondaryButtonProps} onClick={onClose}>
                  Cancel
                </Button>
                <Button {...actionButtonProps} onClick={onClose}>
                  Confirm
                </Button>
              </>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithSuccess: Story = {
  args: {
    canBeDismissed: true,
    level: 'success',
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Success</Modal.Header>
          <Modal.Content>
            <Paragraph>Congratulations</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ actionButtonProps }) => (
              <Button {...actionButtonProps} onClick={onClose}>
                OK
              </Button>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};

export const WithNotice: Story = {
  args: {
    canBeDismissed: true,
    level: 'notice',
  },
  render: args => {
    const { onClose, isOpen, openModal } = useModal();
    return (
      <>
        <Button onClick={openModal}>Open modal</Button>
        <Modal {...args} onClose={onClose} isOpen={isOpen}>
          <Modal.Header>Notification</Modal.Header>
          <Modal.Content>
            <Paragraph>Please notice it</Paragraph>
          </Modal.Content>
          <Modal.Footer>
            {({ actionButtonProps }) => (
              <Button {...actionButtonProps} onClick={onClose}>
                Got it
              </Button>
            )}
          </Modal.Footer>
        </Modal>
      </>
    );
  },
};