import { Autocomplete } from "@components/Autocomplete/Autocomplete";
import { AutocompleteRenderInputParams } from "@mui/material";
import type { Meta, StoryObj } from "@storybook/react";


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

export default meta;

type Story = StoryObj<typeof meta>;


export const Default: Story = {
  args: {
    options: [
      { label: 'Tag1', value: "tag1" },
      { label: 'Tag2', value: "tag2" },
      { label: 'Tag3', value: "tag3" },
      { label: 'Tag4', value: "tag4" },
      { label: 'Tag5', value: "tag5" },
      { label: 'Tag6', value: "tag6" },
    ],
    renderInput: (params: AutocompleteRenderInputParams) => null,
    variant: "outlined",
    onOptionChange: (selected) => {
      console.log('selected values', selected);
    }
  }
};

export const PreSelect: Story = {
  args: {
    defaultValues: [{ label: 'Tag1', value: "tag1" }, { label: 'Tag2', value: "tag2" }],
    options: [
      { label: 'Tag1', value: "tag1" },
      { label: 'Tag2', value: "tag2" },
      { label: 'Tag3', value: "tag3" },
      { label: 'Tag4', value: "tag4" },
      { label: 'Tag5', value: "tag5" },
      { label: 'Tag6', value: "tag6" },
    ],
    renderInput: (params: AutocompleteRenderInputParams) => null,
    variant: "outlined",
    onOptionChange: (selected) => {
      console.log('selected values', selected);
    }
  }
};