import { commonProps } from "../../utils/storybook";
import { chipDefaultVariants, chipVariantsStyles } from "./chip.styled";
import { Chip } from ".";
import type { ChipProps } from ".";
import type { StoryObj, Meta } from "@storybook/react";

const chipVariants = Object.keys(chipVariantsStyles);

const meta: Meta<React.FC<ChipProps>> = {
  title: "Chip",
  component: Chip,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      description: "Sets the variant of the chip.",
      options: chipVariants,
      table: {
        type: { summary: chipVariants.join(" | ") },
        defaultValue: { summary: chipDefaultVariants.variant },
      },
    },
    disabled: {
      description: "Disables the chip.",
      type: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    as: {
      description: "Sets the element type of the chip.",
      options: ["div", "button"],
      table: {
        type: { summary: "React.ElementType" },
        defaultValue: { summary: "div" },
      },
    },
    ...commonProps,
  },
  args: {
    children: "I am a chip",
    as: "div",
    disabled: false,
    variant: chipDefaultVariants.variant,
  },
};
export default meta;

type Story = StoryObj<React.FC<ChipProps>>;

export const Default: Story = {
  render: (args) => <Chip {...args} />,
};

/**
 * If a chip is used as a button, it will respond to hover and active states.
 */
export const ChipAsButton: Story = {
  args: {
    as: "button",
  },
  render: (args) => <Chip {...args} />,
};