import {ComponentMeta, ComponentStory} from '@storybook/react';
import {FormControl} from 'native-base';
import {Center} from 'native-base';
import {Primary} from '../Input/Input.stories'; 
import {Stack} from 'native-base';

export default {
  title: "App/Forms/FormControl",
  Component: FormControl,
  argTypes: {
    colorScheme: {
      control: {
        type: 'select',
        options: ['primary', 'indigo']
      }
    }
  }

} as ComponentMeta<typeof FormControl>;

const Template: ComponentStory<typeof FormControl> = (args) => {
  return(
    <Center>
      <FormControl {...args} isRequired>
        <Stack>
        <FormControl.Label>Password</FormControl.Label>
        <Primary type="password" defaultValue="12345"></Primary> 
        <FormControl.HelperText>
              Must be atleast 6 characters.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>
              Atleast 6 characters are required.
        </FormControl.ErrorMessage>
        </Stack>
      </FormControl>
    </Center>
  )
}

export const Secondary = Template.bind({});