import * as React from "react";
import { useState } from "@wordpress/element";
import { Meta, StoryObj } from "@storybook/react";
import { Button, PanelBody } from "@wordpress/components";
import { TitleDialog } from "./TitleDialog";
import { TitleInfo } from "../title-info/TitleInfo";
import { TitleSelection } from "../../types";

const meta: Meta<typeof TitleDialog> = {
  title: "Components/TitleDialog",
  component: TitleDialog,
  argTypes: {
    isOpen: { control: "boolean" },
    onClose: { action: "closed" },
    onConfirm: { action: "confirmed" }
  },
};

export default meta;

type Story = StoryObj<typeof TitleDialog>;

export const Default: Story = {
  render: (args) => {
    const [isOpen, setIsOpen] = useState(false);
    const [titleSelection, setTitleSelection] = useState<TitleSelection | undefined>(undefined);

    return (
      <>
        <Button variant="primary" onClick={() => setIsOpen(true)}>Open Modal</Button>
          <TitleDialog
            {...args}
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            onConfirm={(titleSelection) => {
              setTitleSelection(titleSelection);
              setIsOpen(false);
            }}
          />
        {titleSelection?.meta && (
          <PanelBody>
            <TitleInfo item={titleSelection.meta} />
          </PanelBody>
        )}
      </>
    );
  },
};