import React, { FC } from "react";
import type { Decorator, Meta, StoryFn } from "@storybook/react";
import { Button, ButtonGroup, ThemeProviderWithStyledEngine } from "../";
import type { ButtonProps } from "../components/button/Button";
import type { ButtonGroupProps } from "../components/buttonGroup/ButtonGroup";
import type { IconProps } from "../components/icon/Icon";

const variantOptions: Array<ButtonProps["variant"]> = [
  "primary",
  "secondary",
  "tertiary",
  "outlined",
  "danger",
];

const sizeOptions: Array<ButtonProps["size"]> = ["24", "28", "32", "40"];

const iconWeightOptions: IconProps["weight"][] = [
  "regular",
  "medium",
  "semibold",
  "bold",
];

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

interface AdditionalControls {
  iconWeight: ButtonProps["iconWeight"];
}

const meta = {
  title: "Components/Inputs/ButtonGroup",
  component: ButtonGroup,
  decorators: [decorator],
  argTypes: {
    variant: {
      name: "Variant",
      options: variantOptions,
    },
    size: {
      name: "Size",
      options: sizeOptions,
    },
    iconWeight: {
      name: "Icon weight",
      options: iconWeightOptions,
      control: "radio",
    },
  },
} satisfies Meta<FC<ButtonGroupProps & AdditionalControls>>;

export default meta;

const Template: StoryFn<FC<ButtonGroupProps & AdditionalControls>> = (args) => {
  const { variant, size, children: _, iconWeight } = args;

  return (
    <div className="flex gap-4">
      <ButtonGroup variant={variant} size={size}>
        <Button iconWeight={iconWeight}>Label</Button>
        <Button
          icon="arrow-shape-right"
          tooltip="label - 2"
          iconWeight={iconWeight}
          disabled
        />
        <Button
          icon="arrow-shape-left"
          tooltip="label - 3"
          iconWeight={iconWeight}
        />
      </ButtonGroup>
      <ButtonGroup variant={variant} size={size}>
        <Button iconWeight={iconWeight}>Label</Button>
        <Button
          icon="arrow-shape-right"
          tooltip="label - 2"
          iconWeight={iconWeight}
        />
        <Button
          icon="arrow-shape-left"
          tooltip="label - 3"
          iconWeight={iconWeight}
        />
      </ButtonGroup>
    </div>
  );
};

export const Default: StoryFn<FC<ButtonGroupProps & AdditionalControls>> =
  Template.bind({});

Default.args = {
  variant: "primary",
  size: "32",
  iconWeight: "semibold",
};
