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

import EditableField, {EDIT_ICON_SIZE, EDIT_ICON_COLOR} from '../../Components/EditableField/src';

export default storiesOf('Components | EditableField', module)
  .add('default', () => (
    <EditableField
      isLoading={boolean('Loading', false)}
      isEditable={boolean('Editable', true)}
      value={text('Value', 'blah blah dsfg dfsg sdfg fsdg sdfg sdfg dfg')}
      errors={array('Errors', ['Ultimate Fatal Error Text'])}
      onFocus={action('onFocus')}
      onSave={action('onSave')}
      onCancel={action('onCancel')}
      fieldClassName={text('fieldClassName', 'foobar')}
      onChange={(value) => action('click', value)}
      editIconColor={select('editIconColor', Object.values(EDIT_ICON_COLOR), EDIT_ICON_COLOR.GRAY)}
      editIconSize={select('editIconSize', Object.values(EDIT_ICON_SIZE), EDIT_ICON_SIZE.SMALL)}
      elementId="stories-default-view"
    />
  ));