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

const titleData = titles.find((item) => item.objectType === "movie") as Title;
const showData = titles.find((item) => item.objectType === "show") as Title;

const meta: Meta<typeof TitleControls> = {
  title: "Components/TitleControls",
  component: TitleControls,
  argTypes: {
    onTitleSelectionChange: { action: "onTitleSelectionChange" },
  },
};

export default meta;

type Story = StoryObj<typeof TitleControls>;

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

    return (
      <TitleControls
        {...args}
        titleSelection={titleSelection}
        onTitleSelectionChange={setTitleSelection}
      />
    );
  },
};

export const WithTitle: Story = {
  render: () => {
    const [titleSelection, setTitleSelection] = useState<TitleSelection | undefined>({
      id: String(titleData.justwatchId),
      objectType: titleData.objectType as TitleObjectType,
      meta: titleData,
      seasonNumber: 1,
      episodeNumber: 4,
    });

    return (
      <TitleControls
        titleSelection={titleSelection}
        onTitleSelectionChange={setTitleSelection}
      />
    );
  },
};

export const WithImdbId: Story = {
  render: () => {
    const [titleSelection, setTitleSelection] = useState<TitleSelection>({
      id: titleData.imdbId!,
      idType: "imdb",
      objectType: titleData.objectType,
      meta: titleData,
      episodeNumber: undefined,
      seasonNumber: undefined,
    });

    return (
      <TitleControls
        titleSelection={titleSelection}
        onTitleSelectionChange={setTitleSelection}
      />
    );
  },
};

export const WithShow: Story = {
  render: () => {
    const [titleSelection, setTitleSelection] = useState<TitleSelection>({
      id: String(showData.justwatchId),
      objectType: showData.objectType,
      meta: showData,
      episodeNumber: 3,
      seasonNumber: 2,
    });

    return (
      <TitleControls
        titleSelection={titleSelection}
        onTitleSelectionChange={setTitleSelection}
      />
    );
  },
};

export const WithPartialTitle: Story = {
  render: () => {
    const [titleSelection, setTitleSelection] = useState<TitleSelection>({
      id: String(showData.justwatchId),
      objectType: showData.objectType,
      meta: {
        objectType: showData.objectType,
        justwatchId: showData.justwatchId,
      } as Title,
      episodeNumber: 4,
      seasonNumber: 2,
    });

    return (
      <TitleControls
        titleSelection={titleSelection}
        onTitleSelectionChange={setTitleSelection}
      />
    );
  },
};