brackt/app/components/league/TeamsPanel.stories.tsx

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

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

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

const teams = [
  { id: "t1", name: "Lightning Wolves", ownerId: "u1" },
  { id: "t2", name: "Shadow Hawks", ownerId: "u2" },
  { id: "t3", name: "Iron Eagles", ownerId: "u3" },
  { id: "t4", name: "Cyber Foxes", ownerId: null },
  { id: "t5", name: "Neon Tigers", ownerId: null },
  { id: "t6", name: "Phantom Sharks", ownerId: null },
  { id: "t7", name: "Crimson Tide FC", ownerId: null },
  { id: "t8", name: "Arctic Wolves", ownerId: null },
];

const ownerMap = {
  u1: "alice",
  u2: "bob",
  u3: "carol",
};

const draftSlots = teams.map((t) => ({ team: { id: t.id } }));

// No draft order: only show claimed teams + progress bar
export const NoOrderPartialFill: Story = {
  name: "No order — partial fill",
  args: {
    teams,
    currentUserId: "u1",
    ownerMap,
    draftSlots: [],
  },
};

export const NoOrderFull: Story = {
  name: "No order — league full",
  args: {
    teams: teams.map((t, i) => ({ ...t, ownerId: `u${i + 1}` })),
    currentUserId: "u1",
    ownerMap: Object.fromEntries(teams.map((_, i) => [`u${i + 1}`, `user${i + 1}`])),
    draftSlots: [],
  },
};

// Draft order set: show all teams sorted, with position numbers
export const OrderSetPartialFill: Story = {
  name: "Draft order set — partial fill (progress bar shown)",
  args: {
    teams,
    currentUserId: "u1",
    ownerMap,
    draftSlots,
  },
};

export const OrderSetFull: Story = {
  name: "Draft order set — league full (no progress bar)",
  args: {
    teams: teams.map((t, i) => ({ ...t, ownerId: `u${i + 1}` })),
    currentUserId: "u1",
    ownerMap: Object.fromEntries(teams.map((_, i) => [`u${i + 1}`, `user${i + 1}`])),
    draftSlots,
  },
};

export const YourTeamHighlighted: Story = {
  name: "Your team highlighted (pick 4)",
  args: {
    teams,
    currentUserId: "u3",
    ownerMap,
    draftSlots,
  },
};

export const NoOwnerNames: Story = {
  name: "No owner names resolved",
  args: {
    teams,
    currentUserId: null,
    ownerMap: {},
    draftSlots,
  },
};