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

import InputNumber from '../../Components/InputNumber/src';
import SmartHint, {HINT_POSITION} from '../../Components/SmartHint/src';

export default storiesOf('Components | SmartHint', module)
  .add('default', () => (
    <div
      style={{
        padding: '20px',
        position: 'relative',
        background: 'red',
      }}
    >
      <div
        style={{
          height: '180px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          background: 'green',
          position: 'relative',
        }}
      >
        <InputNumber
          label="InputNumber"
          name="InputText"
          isDisabled={false}
          onChange={(value) => action(value)}
          elementId="InputNumber"
          value={10}
          maxLength={20}
        />
        <SmartHint
          attachToElementId="InputNumber"
          elementId="InputNumberSmartHint"
          title={text('Title', 'Title')}
          position={select('Position', Object.values(HINT_POSITION))}
          isVisible={select('IsVisible', Object.values([false, true]))}
        >
          {text('Content', 'blah blah dsfg dfsg sdfg fsdg sdfg sdfg dfg')}
        </SmartHint>
      </div>
    </div>
  ));