import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import classes from '../../../.storybook/static/css/modal.scss';
import { TextButton } from '../Buttons';
import { IconName } from '../Icons';
import { PageHeader } from '../PageHeader';
import { Modal } from './Modal';
import { useModal } from './useModal';

const meta: Meta<typeof Modal> = {
  title: 'Other Components/Modal',
  component: Modal,
};
export default meta;

const StoryComponent: React.FC<{ cancel: () => void }> = ({
  cancel,
}): JSX.Element => {
  return (
    <div className={classes.container}>
      <PageHeader
        title={'Modal'}
        actions={[
          {
            label: 'Close',
            icon: IconName.X,
            kind: 'action',
            onClick: cancel,
          },
        ]}
      />
      <div className={classes.body}>
        <h1>Modal</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
          maxime reiciendis non aliquid perferendis! Maiores tenetur aspernatur
          tempora porro accusantium cupiditate velit voluptatem et tempore
          dolorem. Assumenda repellendus sunt veniam!
        </p>
        <TextButton
          text={'close'}
          className={classes.closeButton}
          onButtonClicked={() => cancel()}
        />
      </div>
    </div>
  );
};

export const Default: StoryObj<typeof Modal> = {
  argTypes: {
    isShown: {
      control: false,
    },
  },
  render: (args) =>
    React.createElement(() => {
      const [isShown, setIsShown] = useState<boolean>(false);
      const onCancel = (): void => setIsShown(false);

      return (
        <div>
          <TextButton
            text={'Show Modal'}
            onButtonClicked={() => setIsShown(true)}
          />
          <Modal {...args} isShown={isShown}>
            <StoryComponent cancel={onCancel} />
          </Modal>
        </div>
      );
    }),
};

export const useModalHook: StoryObj<typeof Modal> = {
  parameters: {
    controls: {
      hideNoControlsWarning: true,
      exclude: /.*/g,
    },
  },
  render: (args) =>
    React.createElement(() => {
      const { ModalWrapper, openModal } = useModal(({ closeModal }) => (
        <StoryComponent cancel={closeModal} />
      ));

      return (
        <div>
          <TextButton text={'Show Modal'} onButtonClicked={openModal} />
          <ModalWrapper />
        </div>
      );
    }),
};
