import { type ElementType, useState } from 'react';

import { Button, Flex, TwoButtonDialog } from '@quotalab/qds';

import { OverlayProvider, useOverlay, overlays } from '.';

export default {
  title: 'Overlay Manager / Event',
  decorators: [
    (Story: ElementType) => (
      <OverlayProvider>
        <Story />
      </OverlayProvider>
    ),
  ],
};

export function Default() {
  const { overlayList } = useOverlay();

  return (
    <Flex direction="column">
      <Button
        onClick={() => {
          overlays.open(({ overlayId }) => {
            return (
              <p style={{ cursor: 'pointer' }} onClick={() => overlays.close(overlayId)}>
                Overlay Component # {overlayId}
              </p>
            );
          });
        }}
      >
        open content modal
      </Button>
      <Flex direction="column">
        <p>overlayList</p>
        <ul>
          {overlayList.map((item) => {
            return <li key={item.id}>id: {item.id}</li>;
          })}
        </ul>
      </Flex>
    </Flex>
  );
}

export function RemovePrevModal() {
  const [overlayId, setOverlayId] = useState<string>();
  const { overlayList } = useOverlay();

  return (
    <Flex direction="column">
      <Button
        onClick={() => {
          if (overlayId != null) overlays.close(overlayId);

          overlays.open(({ overlayId }) => {
            setOverlayId(overlayId);
            return (
              <p style={{ cursor: 'pointer' }} onClick={() => overlays.close(overlayId)}>
                Overlay Component # {overlayId}
              </p>
            );
          });
        }}
      >
        open content modal
      </Button>
      <Flex direction="column">
        <p>overlayList</p>
        <ul>
          {overlayList.map((item) => {
            return <li key={item.id}>id: {item.id}</li>;
          })}
        </ul>
      </Flex>
    </Flex>
  );
}

export function OpenOverlay() {
  const { overlayList } = useOverlay();

  return (
    <Flex direction="column">
      <Button
        onClick={() => {
          overlays.open(({ isOpen, onClose }) => {
            return <TwoButtonDialog isOpen={isOpen} onClose={onClose} title="TwoButtonDialog" />;
          });
        }}
      >
        openOverlay
      </Button>
      <Flex direction="column">
        <p>overlayList</p>
        <ul>
          {overlayList.map((item) => {
            return <li key={item.id}>id: {item.id}</li>;
          })}
        </ul>
      </Flex>
    </Flex>
  );
}