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

import RadioText, { RadioTextProps } from './RadioText';
import Block from '../../atoms/Block/Block';

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

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

const Template: Story<RadioTextProps> = (args) => <RadioText {...args}></RadioText>;

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: (
        <RadioText
            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
        </RadioText>
    ),
};

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

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