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

import Button, {BUTTON_TYPE} from '../../Components/Button/src';
import {Title, TYPES} from '../../Components/Title/src';
import Badge, {BADGE_TYPE} from '../../Components/Badge/src';
import EditableField from '../../Components/EditableField/src';
import PageHeader from '../../Components/PageHeader/src';
import pageHeaderNote from '../../Components/PageHeader/README.md';

const actions = (
  <div>
    <Badge type={BADGE_TYPE.WARNING} label="Moderation" />
    <span style={{marginRight: 12}} />
    <Button
      elementId="PageTitle"
      onClick={() => action('clicked')}
      type={BUTTON_TYPE.PRIMARY}
    >
      Add new
    </Button>
  </div>
);

export default storiesOf('Titles and text | PageHeader', module)
  .add('default', () => (
    <PageHeader
      actions={actions}
    >
      <Title type={TYPES.H1}>{text('Title', 'Payment methods')}</Title>
    </PageHeader>
  ), {
    notes: pageHeaderNote,
  })
  .add('Editable', () => (
    <PageHeader
      actions={actions}
    >
      <EditableField
        elementId="EditableField"
        isLoading={boolean('Loading', false)}
        isEditable={boolean('Editable', true)}
        value={text('Value', 'blah blah dsfg dfsg sdfg fsdg sdfg sdfg dfg')}
        onFocus={action('onFocus')}
        onSave={action('onSave')}
        onCancel={action('onCancel')}
        fieldClassName={text('fieldClassName', 'foobar')}
        onChange={(value) => action('click', value)}
      />
    </PageHeader>
  ));