brackt/app/components/draft/MiniDraftGrid.stories.tsx

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

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

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

const teamNames = ["Alpha", "Bravo", "Charlie", "Delta"];
const ownerMap: Record<string, string> = {};
const draftSlots = teamNames.map((name, i) => {
  const id = `team-${i + 1}`;
  ownerMap[id] = name;
  return { id, draftOrder: i + 1, team: { id, name, logoUrl: null } };
});

function buildRound(round: number, teamCount: number, picks: Array<number | null>) {
  const isEvenRound = round % 2 === 0;
  return Array.from({ length: teamCount }, (_, i) => {
    const teamIndex = isEvenRound ? teamCount - 1 - i : i;
    const pickNumber = (round - 1) * teamCount + i + 1;
    const pick = picks[i];
    return {
      pickNumber,
      round,
      pickInRound: i + 1,
      teamId: draftSlots[teamIndex].id,
      ...(pick !== null
        ? {
            pick: {
              participant: { name: `Participant ${pick}` },
              sport: { name: ["NFL", "NBA", "NHL", "MLB"][pick % 4] },
            },
          }
        : {}),
    };
  });
}

const fullGrid = [
  buildRound(1, 4, [1, 2, 3, 4]),
  buildRound(2, 4, [5, 6, null, null]),
  buildRound(3, 4, [null, null, null, null]),
  buildRound(4, 4, [null, null, null, null]),
];

export const Round1ShowsFirstTwo: Story = {
  name: "Round 1 — Shows Rounds 1 & 2",
  args: {
    draftSlots,
    draftGrid: fullGrid,
    currentPick: 1,
    currentRound: 1,
    ownerMap,
  },
};

export const Round2: Story = {
  name: "Round 2 — Shows Rounds 1 & 2",
  args: {
    draftSlots,
    draftGrid: fullGrid,
    currentPick: 5,
    currentRound: 2,
    ownerMap,
  },
};

export const Round3: Story = {
  name: "Round 3 — Shows Rounds 2 & 3",
  args: {
    draftSlots,
    draftGrid: fullGrid,
    currentPick: 9,
    currentRound: 3,
    ownerMap,
  },
};

export const Round4: Story = {
  name: "Round 4 — Shows Rounds 3 & 4",
  args: {
    draftSlots,
    draftGrid: fullGrid,
    currentPick: 13,
    currentRound: 4,
    ownerMap,
  },
};

export const AllPicked: Story = {
  name: "Both Rounds Fully Picked",
  args: {
    draftSlots,
    draftGrid: [
      buildRound(1, 4, [1, 2, 3, 4]),
      buildRound(2, 4, [5, 6, 7, 8]),
      buildRound(3, 4, [null, null, null, null]),
    ],
    currentPick: 9,
    currentRound: 3,
    ownerMap,
  },
};

export const SixTeams: Story = {
  name: "6 Teams — Snake Draft",
  args: (() => {
    const names6 = ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot"];
    const ownerMap6: Record<string, string> = {};
    const slots6 = names6.map((name, i) => {
      const id = `team-${i + 1}`;
      ownerMap6[id] = name;
      return { id, draftOrder: i + 1, team: { id, name, logoUrl: null } };
    });
    const grid6 = [
      buildRound(1, 6, [1, 2, 3, 4, 5, 6]),
      buildRound(2, 6, [7, 8, null, null, null, null]),
    ];
    return {
      draftSlots: slots6,
      draftGrid: grid6,
      currentPick: 9,
      currentRound: 2,
      ownerMap: ownerMap6,
    };
  })(),
};

export const EmptyGrid: Story = {
  name: "Empty Grid",
  args: {
    draftSlots,
    draftGrid: [],
    currentPick: 1,
    currentRound: 1,
    ownerMap,
  },
};