import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import {Input} from "./Input";
import {Center, Box} from 'native-base';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "App/Forms/Input",
  component: Input,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    colorScheme: { control: "color" },
    size: { control: "select", options: [15, 20,25, 30] },
    variant: { control: 'select', options: ["outline", "filled", "underlined", "unstyled", "rounded"]},
    shadow: {control: 'select', options: [1,2,3,4,5,6,7,8,9]},
    type: {control: {
      type: 'select',
      options: ['text', 'password', 'submit', 'email']
    }
  },
  },
} as ComponentMeta<typeof Input>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Input> = (args) => (
    <Input {...args}/>
);

export const Primary = Template.bind({ });
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  colorScheme: "primary",
  size: 'md',
  placeholder: "Input",
  isFullWidth: true,
  maxWidth: "300px",
  type: 'text'
};

export const WithShadow = Template.bind({ });
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithShadow.args = {
  colorScheme: "secondary",
  size: "md",
  placeholder: 'Input',
  isFullWidth: true,
  maxWidth: "300px",
  shadow: 1
};