import React from 'react';
import { storiesOf } from '@storybook/react';
import { Grid } from '~/components/Grid';
import { Text } from '~/components/Text';
import * as icons from '~/assets/icons';
import Docs from './BaseInput.mdx';
import { BaseInput } from '..';

const GridHorizontal = (props: any) => (
  <Grid
    gridAutoFlow="column"
    gridAutoColumns="100px auto"
    alignItems="center"
    {...props}
  />
);

storiesOf('Inputs|BaseInput', module)
  .add('Docs', () => <Docs />)
  .addWithJSX('Default', () => (
    <Grid>
      <GridHorizontal>
        <Text>Default</Text>
        <BaseInput placeholder="This is a placeholder" />
      </GridHorizontal>
      <GridHorizontal>
        <Text>Disabled</Text>
        <BaseInput disabled />
      </GridHorizontal>
      <GridHorizontal>
        <Text>Error</Text>
        <BaseInput invalid />
      </GridHorizontal>
      <GridHorizontal>
        <Text>Read only</Text>
        <BaseInput readOnly value="This is read only" />
      </GridHorizontal>
    </Grid>
  ))
  .addWithJSX('With unit', () => <BaseInput unit="USD" />)
  .addWithJSX('With custom unit', () => <BaseInput unit={<icons.SvgDai />} />);
