import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { MaskText } from '.';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/MaskText', module)
   .add('RG', () => (
      <Style>
         <MaskText value="365882021" RG />
      </Style>
   ))
   .add('CPF', () => (
      <Style>
         <MaskText value="11281519114" CPF />
      </Style>
   ))
   .add('Numero', () => (
      <Style>
         <MaskText value="11a28151911d- 412" Number />
      </Style>
   ))
   .add('CEP', () => (
      <Style>
         <MaskText value="01717115" CEP />
      </Style>
   ))
   .add('CNPJ', () => (
      <Style>
         <MaskText value="26576255000191" CNPJ />
      </Style>
   ))
   .add('NoSpace', () => (
      <Style>
         <MaskText value="265 76 25 50 00191" NoSpace />
      </Style>
   ))
   .add('Phone', () => (
      <Style>
         <MaskText value="11913617518" Phone />
      </Style>
   ));
