import * as React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import type { Title } from "../../types";
import { useState } from "@wordpress/element";
import { TitleSelect } from "./TitleSelect";
import titles from "../../mocks/data/titles.json";

const titleData = titles[0] as Title;

const meta: Meta<typeof TitleSelect> = {
  title: "Components/TitleSelect",
  component: TitleSelect,
  argTypes: {
    onTitleSelect: { action: "handleTitleSelect" },
  },
};

export default meta;

type Story = StoryObj<typeof TitleSelect>;

export const Default: Story = {
  render: () => {
    const [selectedTitle, setSelectedTitle] = useState<Title>();

    return (
      <div>
        <TitleSelect
          selectedTitle={selectedTitle}
          onTitleSelect={setSelectedTitle}
        />
        {selectedTitle && (
          <div>
            <h2>Selected Title</h2>
            <pre>{JSON.stringify(selectedTitle, null, 2)}</pre>
          </div>
        )}
      </div>
    );
  },
};

export const WithTitle: Story = {
  render: () => {
    const [selectedTitle, setSelectedTitle] = useState<Title>(titleData);

    return (
      <div>
        <TitleSelect
          selectedTitle={selectedTitle}
          onTitleSelect={setSelectedTitle}
        />
        <div>
          <h2>Selected Title</h2>
          <pre>{JSON.stringify(selectedTitle, null, 2)}</pre>
        </div>
      </div>
    );
  },
};

export const WithImdbId: Story = {
  render: () => {
    const [selectedTitle, setSelectedTitle] = useState<Title>(titleData);

    return (
      <div>
        <TitleSelect
          selectedTitle={selectedTitle}
          onTitleSelect={setSelectedTitle}
          idType='imdb'
        />
        {selectedTitle && (
          <div>
            <h2>Selected Title</h2>
            <pre>{JSON.stringify(selectedTitle, null, 2)}</pre>
          </div>
        )}
      </div>
    );
  },
};

export const WithPartialTitle: Story = {
  render: () => {
    const [selectedTitle, setSelectedTitle] = useState<Title>({
      ...titleData,
      title: null,
      originalReleaseYear: null,
      director: null,
    } as any);

    return (
      <div>
        <TitleSelect
          selectedTitle={selectedTitle}
          onTitleSelect={setSelectedTitle}
          idType='imdb'
        />
        {selectedTitle && (
          <div>
            <h2>Selected Title</h2>
            <pre>{JSON.stringify(selectedTitle, null, 2)}</pre>
          </div>
        )}
      </div>
    );
  },
};