import { ComponentMeta, ComponentStory } from "@storybook/react";
import * as React from "react";
import { useStore } from "../../hooks";
import { Select } from "./";

const options = [
  { label: "Option 1", value: "option1" },
  { label: "Option 2", value: "option2" },
  { label: "Option 3", value: "option3" },
  { label: "Option 4", value: "option4" },
  { label: "Option 5", value: "option5" },
];

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/Select",
  component: Select,
  args: {
    options,
    placeholder: "This is a demo placeholder",
    getOptionLabel: (option) => option.label,
  },
} as ComponentMeta<typeof Select>;
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Select> = (args) => (
  <Select data-component="Select$Brevity" {...args} />
);

export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  position: "item-aligned",
};

export const Secondary = Template.bind({});
Secondary.args = {
  position: "popper",
  options: ["A", "B", "C", "D"],
  defaultValue: "C",
  getOptionLabel: (option) => option,
};

export const StateFul = () => {
  const set = useStore((state) => state.set);
  React.useEffect(() => {
    setTimeout(() => {
      set("select", { value: null });
    }, 5000);
  }, []);
  return (
    <Select
      data-id="select"
      data-component="Select$Brevity"
      options={["A", "B", "C", "D"]}
      placeholder="This is a demo placeholder"
      getOptionLabel={(option) => option}
      onChange={(value) => {
        console.log("Selected value", value);
      }}
    />
  );
};