import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean, select } from '@storybook/addon-knobs';
import { SHAPE_ASYNC_STATUS_REQUESTED } from '@vincent_za/utils';

import { asyncStates } from '../../../storybook/utils';
import PageSection from './component';

const props = ({
  isTouchDevice = false,
  isSearch = undefined,
  isAccordion = undefined,
  isOpenByDefault = undefined,
  isAccordionDisabled = undefined,
  isTableResponsive = undefined,
  isHidden = undefined,
  isDisabled = undefined,
  isNoContent = undefined,
  actionTemplate = undefined,
  title = undefined,
  fieldName = undefined,
  formName = undefined,
  children = undefined,

  hasAsyncStatus = true,
  isSpinnerAlwaysVisible = undefined,
  isInfoErrorVariant = undefined,
  infoMessage = undefined,
  asyncStatus = undefined,
} = {}) => ({
  isTouchDevice: boolean('isTouchDevice', isTouchDevice),
  isSearch: boolean('isSearch', isSearch),
  isAccordion: boolean('isAccordion', isAccordion),
  isOpenByDefault: boolean('isOpenByDefault', isOpenByDefault),
  isAccordionDisabled: boolean('isAccordionDisabled', isAccordionDisabled),
  isTableResponsive: boolean('isTableResponsive', isTableResponsive),
  isHidden: boolean('isHidden', isHidden),
  isDisabled: boolean('isDisabled', isDisabled),
  isNoContent: boolean('isNoContent', isNoContent),
  actionTemplate: text('actionTemplate', actionTemplate),
  title: text('title', title),
  fieldName: text('fieldName', fieldName),
  formName: text('formName', formName),
  children: text('children', children),

  hasAsyncStatus: boolean('hasAsyncStatus', hasAsyncStatus),
  isSpinnerAlwaysVisible: boolean('isSpinnerAlwaysVisible', isSpinnerAlwaysVisible),
  isInfoErrorVariant: boolean('isInfoErrorVariant', isInfoErrorVariant),
  infoMessage: text('infoMessage', infoMessage),
  asyncStatus: select('asyncStatus', asyncStates({ isList: false }), asyncStatus),
});

storiesOf('Web|page')
  .add('PageSection', () => (
    <PageSection {...props({
      title: 'page section title',
      isNoContent: true,
      hasAsyncStatus: true,
      isSpinnerAlwaysVisible: true,
      asyncStatus: SHAPE_ASYNC_STATUS_REQUESTED,
    })} />
  ), { info: 'container passes isTouchDevice' });
