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

import Button, {BUTTON_TYPE} from '../../Components/Button/src';
import Popup from '../../Components/Popup/src';
import InputText from '../../Components/InputText/src';

const isPopupVisible = true;

export default storiesOf('Components | Popup', module)
  .add('default view', () => isPopupVisible && (
    <Popup
      header={text('Title', 'Title')}
      footer={text('Footer', 'Footer')}
      closePopupHandler={(value) => {
        alert(`setting isPopupVisible to: ${value}`);
      }}
      size={select('Size', ['medium', 'small', 'big'])}
      theme={select('Theme', ['dark', 'light'])}
    >
      <div>
        <InputText
          onChange={(value) => {
            action(value);
          }}
          elementId="text-input"
          name="text-input"
          autoFocus
        />
      </div>
    </Popup>
  ))
  .add('footer buttons', () => isPopupVisible && (
    <Popup
      header={text('Title', 'Title')}
      footer={(
        <Button
          onClick={() => {
            alert('Any action on click');
          }}
          elementId="footer-button"
          type={BUTTON_TYPE.PRIMARY}
        >
          Primary button
        </Button>
            )}
      closePopupHandler={(value) => {
        alert(`setting isPopupVisible to: ${value}`);
      }}
      size={select('Size', ['medium', 'small', 'big'])}
      theme={select('Theme', ['dark', 'light'])}
    >
      <div>Children content</div>
    </Popup>
  ))
  .add('long content', () => isPopupVisible && (
    <Popup
      header={text('Title', 'My very very very very very very very very very very very very very very long title')}
      footer={text('Footer', 'Footer')}
      closePopupHandler={(value) => {
        alert(`setting isPopupVisible to: ${value}`);
      }}
      size={select('Size', ['medium', 'small', 'big'])}
      theme={select('Theme', ['dark', 'light'])}
    >
      <div>
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
        Children content
        <br />
      </div>
    </Popup>
  ))
  .add('custom wrapper handler', () => isPopupVisible && (
    <Popup
      header={text('Title', 'Title')}
      footer={text('Footer', 'Footer')}
      closePopupHandler={(value) => {
        alert(`setting isPopupVisible to: ${value}`);
      }}
      wrapperHandler={() => {
        alert('Custom wrapper handler');
      }}
      size={select('Size', ['medium', 'small', 'big'])}
      theme={select('Theme', ['dark', 'light'])}
    >
      <div>
        <InputText
          onChange={(value) => {
            action(value);
          }}
          elementId="text-input"
          name="text-input"
          autoFocus
        />
      </div>
    </Popup>
  ))
  .add('without close button', () => isPopupVisible && (
    <Popup
      header={text('Title', 'Title')}
      footer={text('Footer', 'Footer')}
      size={select('Size', ['medium', 'small', 'big'])}
      theme={select('Theme', ['dark', 'light'])}
    >
      <div>
        <InputText
          onChange={(value) => {
            action(value);
          }}
          elementId="text-input"
          name="text-input"
          autoFocus
        />
      </div>
    </Popup>
  ));