import type { Meta, StoryObj } from "@storybook/react-vite";
import { DraftPickCell } from "./DraftPickCell";

const meta: Meta<typeof DraftPickCell> = {
  title: "Draft/DraftPickCell",
  component: DraftPickCell,
  parameters: {
    layout: "padded",
  },
};

export default meta;
type Story = StoryObj<typeof DraftPickCell>;

const basePickArgs = {
  pickNumber: 1,
  round: 1,
  pickInRound: 1,
  state: "picked" as const,
  pick: {
    participant: { name: "LeBron James" },
    sport: { name: "Basketball" },
  },
};

export const Upcoming: Story = {
  args: {
    pickNumber: 5,
    round: 1,
    pickInRound: 5,
    state: "upcoming",
  },
};

export const Current: Story = {
  args: {
    pickNumber: 5,
    round: 1,
    pickInRound: 5,
    state: "current",
  },
};

export const Picked: Story = {
  args: basePickArgs,
};

export const PickedElectricCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "electric",
  },
};

export const PickedEmeraldCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "emerald",
  },
};

export const PickedAmberCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "amber",
  },
};

export const PickedCoralCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "coral",
  },
};

export const PickedLongNames: Story = {
  name: "Picked — Long Names (truncation)",
  args: {
    pickNumber: 12,
    round: 2,
    pickInRound: 6,
    state: "picked",
    pick: {
      participant: { name: "Alexander Ovechkin-Washington" },
      sport: { name: "Ice Hockey — NHL 2025/26" },
    },
  },
};

export const AllStatesSideBySide: Story = {
  name: "All States — Side by Side",
  render: () => (
    <div className="flex gap-2 items-stretch">
      <DraftPickCell
        pickNumber={1}
        round={1}
        pickInRound={1}
        state="picked"
        pick={basePickArgs.pick}
      />
      <DraftPickCell
        pickNumber={2}
        round={1}
        pickInRound={2}
        state="current"
      />
      <DraftPickCell
        pickNumber={3}
        round={1}
        pickInRound={3}
        state="upcoming"
      />
    </div>
  ),
};

export const CoronaVariantsRow: Story = {
  name: "Corona Variants — Side by Side",
  render: () => (
    <div className="flex gap-2 items-stretch">
      {(
        ["gradient", "electric", "emerald", "amber", "coral"] as const
      ).map((variant, i) => (
        <DraftPickCell
          key={variant}
          pickNumber={i + 1}
          round={1}
          pickInRound={i + 1}
          state="picked"
          pick={basePickArgs.pick}
          corona={variant}
        />
      ))}
    </div>
  ),
};