import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";
import Select, { SelectProps } from "./Select";
import { SIZE } from "baseui/input";

export default {
  title: "Components/Input/Select",
  component: Select,
  argTypes: {
    size: {
      control: {
        type: "radio",
        options: ["default", "compact", "large", "mini"],
      },
    },
  },
} as Meta;

const Template: Story<SelectProps> = (args) => {
  const [value, setValue] = React.useState([]);
  return (
    <ThemeProvider>
      <Select
        {...args}
        value={value}
        onChange={(params) => setValue(params.value)}
      />
    </ThemeProvider>
  );
};

export const Default = Template.bind({});
Default.args = {
  multi: true,
  placeholder: "Type of building",
  size: SIZE.large,
  options: [
    { label: "Office", id: "office" },
    { label: "House", id: "house" },
    { label: "Appartment", id: "appartment" },
    { label: "Penthouse", id: "penthouse" },
    { label: "Loft", id: "loft" },
    { label: "Barn", id: "barn" },
  ],
};