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

import { ThemeProvider } from "../ThemeProvider";
import Input, { InputProps } from "./Input";
import { SIZE } from "baseui/input";

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

const Template: Story<InputProps> = (args) => {
  const [value, setValue] = React.useState("");
  return (
    <ThemeProvider>
      <Input
        {...args}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </ThemeProvider>
  );
};

export const Default = Template.bind({});
Default.args = {
  size: SIZE.large,
  value: "Europalaan 400",
  placeholder: "Europalaan 400",
  clearable: true,
  startEnhancer: "Address",
  endEnhancer: `👍🏼`,
};