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


const meta = {
    title: "Aisera/ExerciseOptions",
    component: ExerciseOptions,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
    argTypes: {

    },
} satisfies Meta<typeof ExerciseOptions>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        height: "284px",
        width: "424px",
        requests: 40,
        categorization: {
            label: "",
            width: "300px",
            options: [
                { label: "Misclassification", value: "Misclassification" },
                { label: "Unknown", value: "Unknown" },
            ],
            onOptionChange: (option) => {
                console.log('selected auto categorization value : ', option);
            },
        },
        resolutionType: {
            label: "",
            width: "300px",
            options: [
                { label: "Not Helpful - Hard Understand", value: "Not Helpful - Hard Understand" },
                { label: "Helpful - understand", value: "Helpful - understand" },
            ],
            onOptionChange: (option) => {
                console.log('selected Resolution type value :', option);
            },
        },
        resolution: {
            label: "",
            width: "300px",
            options: [
                { label: "Unresolved", value: "Unresolved", chipColor: "red" },
                { label: "Resolved", value: "Resolved", chipColor: "green" },
                { label: "Warning", value: "Warning", chipColor: "orange" },
                { label: "Testing", value: "Testing" },

            ],
            onOptionChange: (option) => {
                console.log('selected auto Resolution value :', option);
            },
        },
        tags: {
            label: "",
            width: "300px",
            options: [
                { label: "tag1", value: "tag1" },
                { label: "tag2", value: "tag2" },
                { label: "tag3", value: "tag3" },
                { label: "tag4", value: "tag4" },
            ],
            onOptionChange: (option) => {
                console.log('selected tags : ', option);
            },
        }
    },
};