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


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

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
    args: {
        options: [
            { label: "Positive", value: "Positive" },
            { label: "Negative", value: "Negative" },
            { label: "Neutral", value: "Neutral" }
        ],
        label: "",
        onOptionChange: (option) => {
            console.log('selected value', option);
        },
    },

};


export const DefaultValue: Story = {
    args: {
        value: "Neutral",
        options: [
            { label: "Positive", value: "Positive" },
            { label: "Negative", value: "Negative" },
            { label: "Neutral", value: "Neutral" }
        ],
        onOptionChange: (option) => {
            console.log('selected value', option);
        },
    },

};

export const Disabled: Story = {
    args: {
        label: "",
        value: "Positive",
        disabled: true,
        options: [
            { label: "Positive", value: "Positive" },
            { label: "Negative", value: "Negative" },
            { label: "Neutral", value: "Neutral" }
        ],
    },
};

export const ReadOnly: Story = {
    args: {
        value: "Neutral",
        readOnly: true,
        options: [
            { label: "Positive", value: "Positive" },
            { label: "Negative", value: "Negative" },
            { label: "Neutral", value: "Neutral" }
        ],
        onOptionChange: (option) => {
            console.log('selected value', option);
        },
    },

};


// export const Filled: Story = {
//     args: {
//         label: "Select",
//         variant: "filled",
//         options: [
//             { label: "Positive", value: "Positive" },
//             { label: "Negative", value: "Negative" },
//             { label: "Neutral", value: "Neutral" }
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };

// export const Standard: Story = {
//     args: {
//         label: "Select",
//         variant: "standard",
//         options: [
//             { label: "Positive", value: "Positive" },
//             { label: "Negative", value: "Negative" },
//             { label: "Neutral", value: "Neutral" }
//         ],
//         onOptionChange: (option) => {
//             console.log('selected value', option);
//         },
//     },
// };

// export const Color: Story = {
//     args: {
//         label: "Select",
//         value: "Neutral",
//         color: "warning",
//         options: [
//             { label: "Positive", value: "Positive" },
//             { label: "Negative", value: "Negative" },
//             { label: "Neutral", value: "Neutral" }
//         ],
//     },
// };


// export const ReadOnly: Story = {
//     args: {
//         label: "Select",
//         value: "Positive",
//         readOnly: true,
//         options: [
//             { label: "Positive", value: "Positive" },
//             { label: "Negative", value: "Negative" },
//             { label: "Neutral", value: "Neutral" }
//         ],
//     },
// };