import React, { useState } from 'react';
import { Box } from '@mui/material';
import Error from '@lunit/design-system-icons/Error';

import Button from '@/components/Button';
import Dialog, { DialogProps } from '@/components/Dialog';

import type { Meta, StoryObj, StoryContext } from '@storybook/react-webpack5';

const meta: Meta<typeof Dialog> = {
  title: 'components/Dialog',
  component: Dialog,
  parameters: {
    docs: { disable: true, hidden: true },
  },
  argTypes: {
    onClose: { action: 'onClose' },
  },
};

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

export const PassiveModal: Story = {
  name: 'Type: passive modal',
  render: function PassiveModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          onClose={close}
          type="passive"
          title="Title area"
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </div>
    );
  },
};

export const ActionModal: Story = {
  name: 'Type: action modal',
  render: function ActionModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          onClose={close}
          type="action"
          title="Title area"
          actions={
            <>
              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                Cancel
              </Button>
              <Button kind="contained" size="medium" onClick={close}>
                Save
              </Button>
            </>
          }
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </div>
    );
  },
};

export const NonModal: Story = {
  name: 'Type: non modal',
  render: function NonModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [isOpen, setIsOpen] = useState(false);
    function open() {
      setIsOpen(true);
    }

    function close() {
      setIsOpen(false);
    }

    return (
      <>
        <Box sx={{ display: 'flex', gap: '8px' }}>
          <Button kind="contained" size="medium" onClick={open}>
            Open to see Dialog
          </Button>
          <Button kind="contained" size="medium" onClick={close}>
            click to close Dialog
          </Button>
        </Box>

        <Dialog
          className={classNameFromGlobal}
          isOpen={isOpen}
          nonModal
          type="action"
          onClose={close}
          title="Title area"
          actions={
            <>
              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                Cancel
              </Button>
              <Button kind="contained" size="medium" onClick={close}>
                Save
              </Button>
            </>
          }
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </>
    );
  },
};

export const SmallFalse: Story = {
  name: 'Option: small false',
  render: function SmallFalseRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          type="passive"
          onClose={close}
          title="Title area"
          size="medium"
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </div>
    );
  },
};

export const WithTitleIcon: Story = {
  name: 'Option: title icon',
  render: function WithTitleIconRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          type="action"
          onClose={close}
          title="Title area"
          titleIcon={<Error color="error" variant="filled" />}
          actions={
            <>
              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                Cancel
              </Button>
              <Button kind="contained" color="error" size="medium" onClick={close}>
                Confirm
              </Button>
            </>
          }
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </div>
    );
  },
};

export const WithCustomStyle: Story = {
  name: 'Option: custom style',
  render: function WithCustomStyleRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          type="passive"
          onClose={close}
          title="Title area"
          sx={{
            '& .dialog-title-wrapper': {
              border: '4px dashed red',
              borderRadius: '10px',
              backgroundColor: 'green',
            },
          }}
        >
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
        </Dialog>
      </div>
    );
  },
};

export const WithScroll: Story = {
  name: 'Option: with scroll',
  render: function WithScrollRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
    const classNameFromGlobal = context.globals.theme;
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <div
          ref={(ref) => {
            setTarget(ref);
          }}
        />
        <Dialog
          className={classNameFromGlobal}
          isOpen={Boolean(target)}
          type="action"
          onClose={close}
          title="Title area"
          actions={
            <>
              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                Cancel
              </Button>
              <Button kind="contained" color="error" size="medium" onClick={close}>
                Confirm
              </Button>
            </>
          }
        >
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, suscipit at. Atque enim,
          hic architecto sequi libero deserunt dolores omnis, cumque dignissimos ab animi.
          Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia veniam
          consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
          dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
          dignissimos ab animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit
          amet consectetur adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia
          veniam consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
          dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
          dignissimos ab animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit
          amet consectetur adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia
          veniam consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
          dolor sit amet consectetur
        </Dialog>
      </div>
    );
  },
};