import * as React from "react";
import { useState } from "@wordpress/element";
import { __experimentalHStack as HStack } from "@wordpress/components";
import type { Meta, StoryObj } from "@storybook/react";
import { styled } from "goober";

import type { Title, TitleSelection } from "../../types";
import WidgetPreview from "./WidgetPreview";
import { TitleControls } from "../title-controls/TitleControls";
import titles from "../../mocks/data/titles.json";

const titleData = titles[0] as Title;

const meta: Meta<typeof WidgetPreview> = {
  title: "Components/WidgetPreview",
  component: WidgetPreview,
};

export default meta;

type Story = StoryObj<typeof WidgetPreview>;

export const Default: Story = {
  render: () => (
    <WidgetPreview
      id={1}
      idType="justwatch"
      objectType="movie"
    />
  ),
};

const Sidebar = styled("div")`
  width: 280px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: -1px 0 0 0 rgba(0, 0, 0, .133);
  outline: 1px solid #0000;
  height: 100%;
  overflow-y: auto;
  margin-right: -1rem;
`;

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

    return (
      <HStack style={{ height: "100%" }}>
        <div>
          <h2>Selected Title</h2>
          <WidgetPreview
            id={titleSelection.id}
            idType={titleSelection.idType}
            objectType={titleSelection.objectType}
            seasonNumber={titleSelection.seasonNumber}
            episodeNumber={titleSelection.episodeNumber}
            theme="light"
            maxOffers={4}
            offerLabel="price"
            scale={1}
          />
        </div>
        <Sidebar>
          <TitleControls
            titleSelection={titleSelection}
            onTitleSelectionChange={setTitleSelection}
          />
        </Sidebar>
      </HStack>
    );
  },
};