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

const variantOptions: ButtonVariant[] = [
  "primary",
  "secondary",
  "tertiary",
  "outlined",
  "danger",
];

const sizeOptions: ButtonSize[] = ["tiny", "small", "default", "large"];

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: _, ...restProps } = args;

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

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

Default.args = {
  variant: "primary",
  size: "default",
};
