import type { Meta, StoryObj } from '@storybook/react';
import React, { useCallback, useState } from 'react';

import Button from '@/components/button/Button';
import { PulsingLinesIcon } from '@/icons';

import { useDialogModal } from './DialogModal';

const DialogModalDemo: React.FC<{
  content: React.ReactNode;
  confirmAction: string | boolean;
  confirmLabel: React.ReactNode;
  cancelAction: string | boolean;
  cancelLabel: React.ReactNode;
  autoFocusAction?: string;
}> = (props) => {
  const {
    content,
    confirmAction,
    confirmLabel,
    cancelAction,
    cancelLabel,
    autoFocusAction,
  } = props;
  const { launchDialog } = useDialogModal();

  const [lastAction, setLastAction] = useState<
    string | boolean | null | undefined
  >(undefined);

  const handleClick = useCallback(() => {
    async function confirm() {
      setLastAction(null);
      const contentChildren =
        typeof content !== 'string'
          ? content
          : content.split(/\n{2,}/).map((paragraph, i) => (
              <p key={`p-${i}`}>
                {paragraph.split('\n').map((line, j) =>
                  j === 0 ? (
                    line
                  ) : (
                    <React.Fragment key={`l-${j}`}>
                      <br />
                      {line}
                    </React.Fragment>
                  )
                )}
              </p>
            ));
      const result = await launchDialog(contentChildren, [
        {
          label: confirmLabel,
          action: confirmAction,
          autoFocus: autoFocusAction === confirmAction,
        },
        {
          label: cancelLabel,
          action: cancelAction,
          isCancel: true,
          autoFocus: autoFocusAction === cancelAction,
        },
      ]);
      setLastAction(result);
    }
    confirm();
  }, [
    content,
    confirmAction,
    confirmLabel,
    cancelAction,
    cancelLabel,
    autoFocusAction,
  ]);

  return (
    <div>
      <Button
        onClick={handleClick}
        iconEnd={lastAction === null ? PulsingLinesIcon : undefined}
      >
        Launch dialog
      </Button>
      {lastAction != null ? (
        <p>
          Last dialog action:{' '}
          {typeof lastAction === 'boolean'
            ? `Boolean(${String(lastAction)})`
            : lastAction}
        </p>
      ) : undefined}
    </div>
  );
};

type PagePropsAndCustomArgs = React.ComponentProps<typeof DialogModalDemo>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/DialogModal',
  component: DialogModalDemo,
  argTypes: {
    content: {
      control: { type: 'text' },
    },
    confirmAction: {
      control: { type: 'text' },
    },
    confirmLabel: {
      control: { type: 'text' },
    },
    cancelAction: {
      control: { type: 'text' },
    },
    cancelLabel: {
      control: { type: 'text' },
    },
    autoFocusAction: {
      control: { type: 'text' },
    },
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {
  args: {
    content:
      'Your choices determine your actions.\n\nOr at least the "action" awaited from launchDialog()',
    confirmAction: 'accepted',
    confirmLabel: 'I can live with that',
    cancelAction: 'rejected',
    cancelLabel: 'Noooooooo!!',
  },
};