import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';

import { Input, GlobalStyle } from '../src';

const Wrapper = styled.div`
  margin: 20px;
  padding: 90px;
  background-color: white;
  border: #ebebeb 1px solid;
`;

storiesOf('Inputs', module)
  .add('Default', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Input
          type='text'
          placeholder='Placeholder'
        />
      </Wrapper>
    </React.Fragment>
  ))
  .add('password', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Input
          type='password'
          placeholder='Placeholder'
          passwordType
        />
      </Wrapper>
    </React.Fragment>
  ))
  .add('disabled', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Input
          type='text'
          placeholder='campo desabilitado'
          disabled
        />
      </Wrapper>
    </React.Fragment>
  ))
  .add('isInvalid', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Input
          type='text'
          placeholder='CPF'
          isInvalid="Insira um CPF válido"
          value='123.456.789-10'
          css={`max-width: 360px;`}
        />
      </Wrapper>
    </React.Fragment>
  ))
  .add('isWarning', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <Input
          type='text'
          placeholder='CPF'
          isWarning="Insira um CPF válido"
          value='123.456.789-10'
          css={`max-width: 360px;`}
        />
      </Wrapper>
    </React.Fragment>
  ));