import { SelectChip } from "@components/SelectChip/SelectChip";
import type { Meta, StoryObj } from "@storybook/react";


const meta = {
    title: "Example/SelectChip",
    component: SelectChip,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
    argTypes: {
        color: {
            defaultValue: "primary",
        },
    },
} satisfies Meta<typeof SelectChip>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
    args: {
        options: [
            { label: "Unresolved", value: "Unresolved", chipColor: "red" },
            { label: "Warning", value: "Warning", chipColor: "orange" },
            { label: 'Resolved', value: "Resolved", chipColor: "green" },
            { label: "Testing", value: "Testing", chipColor: "purple" },
        ],
        label: "",
        onOptionChange: (option) => {
            console.log('selected value', option);
        },
    },
};

export const DefaultValue: Story = {
    args: {
        label: "",
        value: "Unresolved",
        options: [
            { label: "Unresolved", value: "Unresolved", chipColor: "red" },
            { label: "Warning", value: "Warning", chipColor: "orange" },
            { label: 'Resolved', value: "Resolved", chipColor: "green" },
            { label: "Testing", value: "Testing" },
        ],
        onOptionChange: (option) => {
            console.log('selected value', option);
        },
    },
};

export const Disabled: Story = {
    args: {
        label: "",
        value: "Unresolved",
        disabled: true,
        options: [
            { label: "Unresolved", value: "Unresolved", chipColor: "red" },
            { label: "Warning", value: "Warning", chipColor: "orange" },
            { label: 'Resolved', value: "Resolved", chipColor: "green" },
            { label: "Testing", value: "Testing" },
        ],
    },
};

export const ReadOnly: Story = {
    args: {
        label: "",
        value: "Unresolved",
        readOnly: true,
        options: [
            { label: "Unresolved", value: "Unresolved", chipColor: "red" },
            { label: "Warning", value: "Warning", chipColor: "orange" },
            { label: 'Resolved', value: "Resolved", chipColor: "green" },
            { label: "Testing", value: "Testing" },
        ],
    },
};

// export const Label: Story = {
//     args: {
//         label: "Select",
//         options: [
//             { label: "Unresolved", value: "Unresolved", chipColor: "red" },
//             { label: "Warning", value: "Warning", chipColor: "orange" },
//             { label: 'Resolved', value: "Resolved", chipColor: "green" },
//             { label: "Testing", value: "Testing" },
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };

// export const Filled: Story = {
//     args: {
//         label: "Select",
//         variant: "filled",
//         options: [
//             { label: "Unresolved", value: "Unresolved", chipColor: "red" },
//             { label: "Warning", value: "Warning", chipColor: "orange" },
//             { label: 'Resolved', value: "Resolved", chipColor: "green" },
//             { label: "Testing", value: "Testing" },
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };

// export const Standard: Story = {
//     args: {
//         label: "Select",
//         variant: "standard",
//         options: [
//             { label: "Unresolved", value: "Unresolved", chipColor: "red" },
//             { label: "Warning", value: "Warning", chipColor: "orange" },
//             { label: 'Resolved', value: "Resolved", chipColor: "green" },
//             { label: "Testing", value: "Testing" },
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };

// export const Color: Story = {
//     args: {
//         label: "Select",
//         value: "Unresolved",
//         color: "warning",
//         options: [
//             { label: "Unresolved", value: "Unresolved", chipColor: "red" },
//             { label: "Warning", value: "Warning", chipColor: "orange" },
//             { label: 'Resolved', value: "Resolved", chipColor: "green" },
//             { label: "Testing", value: "Testing" },
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };