import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { fn } from "storybook/test"

import { MaterialIcon } from "../Icons/MaterialIcon/index.tsx"
import { ChipButton } from "./ChipButton.tsx"
import { config as chipButtonConfig } from "./variants"

const meta: Meta<typeof ChipButton> = {
  title: "Core Components/ChipButton",
  component: ChipButton,
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    variant: {
      control: "select",
      options: Object.keys(chipButtonConfig.variants.variant),
      table: {
        type: {
          summary: Object.keys(chipButtonConfig.variants.variant).join(" | "),
        },
        defaultValue: { summary: chipButtonConfig.defaultVariants.variant },
      },
    },
    size: {
      control: "select",
      options: Object.keys(chipButtonConfig.variants.size),
      table: {
        type: {
          summary: Object.keys(chipButtonConfig.variants.size).join(" | "),
        },
        defaultValue: { summary: "Large" },
      },
      description:
        "Sets the size of the ChipButton component. This only affects the `FilterRounded` variant.",
    },
    selected: {
      control: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    onPress: {
      table: {
        disable: true,
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof ChipButton>

export const Default: Story = {
  args: {
    onPress: fn(),
    children: (
      <>
        Button Chip
        <MaterialIcon icon="chevron_right" size={20} />
      </>
    ),
  },
}

export const Outlined: Story = {
  args: {
    variant: "Outlined",
    onPress: fn(),
    children: (
      <>
        Button Chip
        <MaterialIcon icon="keyboard_arrow_down" size={20} />
      </>
    ),
  },
}

export const FilterRoundedLarge: Story = {
  args: {
    variant: "FilterRounded",
    onPress: fn(),
    size: "Large",
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedLargeSelected: Story = {
  args: {
    variant: "FilterRounded",
    onPress: fn(),
    size: "Large",
    selected: true,
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedMedium: Story = {
  args: {
    variant: "FilterRounded",
    onPress: fn(),
    size: "Medium",
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedMediumSelected: Story = {
  args: {
    variant: "FilterRounded",
    onPress: fn(),
    size: "Medium",
    selected: true,
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}