import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {number, text, boolean} from '@storybook/addon-knobs';

import InputText from '../../Components/InputText/src';
import Card from '../../Components/Card/src';
import {Title} from '../../Components/Title/src';
import {TYPES} from '../../Components/Title/src/types';
import Badge from '../../Components/Badge/src';
import {BADGE_TYPE} from '../../Components/Badge/src/types';
import cardNote from '../../Components/Card/README.md';
import Button, {BUTTON_TYPE} from '../../Components/Button/src';

export default storiesOf('Components | Card', module)
  .add('User card', () => (
    <Card
      elementId="Card"
      isActive={boolean('Active', false)}
      width={number('Width', 500)}
      title={<div>Update personal</div>}
      label={<Badge label="active" type={BADGE_TYPE.SUCCESS} />}
      action={(
        <div style={{textAlign: 'right'}}>
          <Button elementId="card-button-one" type={BUTTON_TYPE.ADVANCED}>Cancel</Button>
          <Button
            elementId="card-button-two"
            type={BUTTON_TYPE.PRIMARY}
          >
            Save
          </Button>
        </div>
            )}
    >
      <div>
        <InputText
          label="First Name"
          name="card-first-name"
          onChange={(value) => action(value)}
          elementId="card-first-name"
          value={text('First Name', 'Ivan')}
        />
        <p>
          <InputText
            label="Second Name"
            name="card-second-name"
            onChange={(value) => action(value)}
            elementId="card-second-name"
            value={text('Second Name', 'Ivanov')}
          />
        </p>
      </div>
    </Card>
  ), {notes: cardNote})
  .add('Active', () => (
    <Card
      isActive={boolean('Active', true)}
      width={number('Width', 300)}
      title={<Title type={TYPES.H2}>Onclick</Title>}
    >
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type
        and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
        leap into electronic
      </div>
    </Card>
  ));