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

import CheckboxText, { CheckboxTextProps } from "./CheckboxText";
import Block from "../../atoms/Block/Block";
import Button from "../../atoms/Button/Button";

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

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

const Template: Story<CheckboxTextProps> = (args) => (
  <CheckboxText {...args}></CheckboxText>
);

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 = {};

export const Usage = Example.bind({});
Usage.args = {
  children: (
    <CheckboxText
      label="Optional product"
      message="To exploit the benefits of AM in the service business, you should seek to follow a structured approach. Involving our supply chain analysts early on in your digitalization project will help you find the AM cases that brings your organization value."
    >
      AM Supply Chain Analysis
    </CheckboxText>
  ),
};

export const Variations = Example.bind({});
Variations.args = {
  children: (
    <Block className="space-y-8">
      <CheckboxText
        checked
        label="Label of the checkbox"
        message="State message"
      >
        Initial checkbox
      </CheckboxText>
      <CheckboxText
        checked
        variation="default"
        label="Label of the checkbox"
        message="State message"
      >
        Default checkbox
      </CheckboxText>
      <CheckboxText
        checked
        variation="primary"
        label="Label of the checkbox"
        message="State message"
      >
        Primary checkbox
      </CheckboxText>
      <CheckboxText
        checked
        variation="secondary"
        label="Label of the checkbox"
        message="State message"
      >
        Secondary checkbox
      </CheckboxText>
    </Block>
  ),
};

export const MessageStates = Example.bind({});
MessageStates.args = {
  children: (
    <Block className="space-y-8">
      <CheckboxText message="Success message" messageClassName="text-green-600">
        This is an success state
      </CheckboxText>
      <CheckboxText message="Info message" messageClassName="text-blue-600">
        This is an info state
      </CheckboxText>
      <CheckboxText
        message="Warning message"
        messageClassName="text-orange-600"
      >
        This is an error state
      </CheckboxText>
      <CheckboxText message="Error message" messageClassName="text-red-600">
        This is an error state
      </CheckboxText>
    </Block>
  ),
};
