import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Breadcrumb } from "./breadcrumb";

const meta = {
  title: "UI/Breadcrumb",
  component: Breadcrumb,
  tags: ["autodocs"],
  args: {
    steps: [
      {
        key: "1",
        label: "Step 1",
      },
      {
        key: "2",
        label: "Step 2",
      },
      {
        key: "3",
        label: "Step 3",
      },
    ],
  },
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Breadcrumb>;

export default meta;

type Story = StoryObj<typeof Breadcrumb>;

export const DefaultBreadcrumb = {} satisfies Story;
export const FlightChangeBreadcrumb = {
  args: {
    steps: [
      {
        key: "1",
        label: "Gidiş",
      },
      {
        key: "2",
        label: "Dönüş",
      },
    ],
    activeSteps: ["2"],
    completedSteps: ["1"],
  },
} satisfies Story;
export const FirstActiveBreadcrumb = {
  args: {
    activeSteps: ["1"],
  },
} satisfies Story;
export const SecondActiveBreadcrumb = {
  args: {
    activeSteps: ["2"],
  },
} satisfies Story;
export const ThirdActiveBreadcrumb = {
  args: {
    activeSteps: ["3"],
  },
} satisfies Story;
export const FirstAndSecondActiveBreadcrumb = {
  args: {
    activeSteps: ["1", "2"],
  },
} satisfies Story;
export const FirstAndThirdActiveBreadcrumb = {
  args: {
    activeSteps: ["1", "3"],
  },
} satisfies Story;
export const SecondAndThirdActiveBreadcrumb = {
  args: {
    activeSteps: ["2", "3"],
  },
} satisfies Story;
export const FirstSecondAndThirdActiveBreadcrumb = {
  args: {
    activeSteps: ["1", "2", "3"],
  },
} satisfies Story;

export const CompletedFirstBreadcrumb = {
  args: {
    completedSteps: ["1"],
  },
} satisfies Story;
export const CompletedSecondBreadcrumb = {
  args: {
    completedSteps: ["2"],
  },
} satisfies Story;
export const CompletedThirdBreadcrumb = {
  args: {
    completedSteps: ["3"],
  },
} satisfies Story;
export const CompletedFirstAndSecondBreadcrumb = {
  args: {
    completedSteps: ["1", "2"],
  },
} satisfies Story;
export const CompletedFirstAndThirdBreadcrumb = {
  args: {
    completedSteps: ["1", "3"],
  },
} satisfies Story;
export const CompletedSecondAndThirdBreadcrumb = {
  args: {
    completedSteps: ["2", "3"],
  },
} satisfies Story;
export const CompletedFirstSecondAndThirdBreadcrumb = {
  args: {
    completedSteps: ["1", "2", "3"],
  },
} satisfies Story;