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

import RadioGroup, { RadioGroupProps } from "./RadioGroup";
import Block from "../../atoms/Block/Block";

export default {
  title: "Component/Elements/RadioGroup",
  component: RadioGroup,
  parameters: {
    component: RadioGroup,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const data = [
  {
    value: "hamburger",
    label: "Hamburger",
    message:
      "A hamburger is a sandwich consisting of a cooked meat patty on a bun or roll.",
  },
  {
    label: "Pizza",
    value: "pizza",
  },
  {
    label: "Pasta",
    value: "pasta",
  },
  {
    label: "Kebabs",
    value: "kebabs",
  },
  {
    label: "Soup",
    value: "soup",
  },
];

const Template: Story<RadioGroupProps> = (args) => (
  <RadioGroup {...args}></RadioGroup>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = { data: data, label: "Select your favorite food" };

export const Types = Example.bind({});
Types.args = {
  children: (
    <Block className="flex flex-col items-center justify-center w-full space-y-8 text-md">
      <RadioGroup data={data} name="ui-lib" />
      <RadioGroup variation="default" data={data} name="ui-lib" />
      <RadioGroup variation="primary" data={data} name="ui-lib" />
      <RadioGroup variation="secondary" data={data} name="ui-lib" />
    </Block>
  ),
};

export const MessageStates = Example.bind({});
MessageStates.args = {
  children: (
    <Block className="flex flex-col items-center justify-center w-full space-y-8 text-md">
      <RadioGroup
        label="Select your food"
        messageClassName="text-red-600"
        data={data}
        name="ui-lib"
      />
      <RadioGroup messageClassName="text-blue-600" data={data} name="ui-lib" />
      <RadioGroup messageClassName="text-green-600" data={data} name="ui-lib" />
      <RadioGroup
        messageClassName="text-orange-600"
        data={data}
        name="ui-lib"
      />
    </Block>
  ),
};
