import React from 'react'
import { storiesOf } from '@storybook/react'
import { isFunction } from 'exotic'
import Pagination from 'presets/Pagination'
import { PaginationDropDown } from 'presets/Pagination/styled'
import { PaginationProps, PaginationState } from 'presets/Pagination/typings'

const productsPerPageList = [
  {
    label: '10',
    value: 'count',
    isSelected: false,
  },
  {
    label: '20',
    value: 'count',
    isSelected: true,
  },
  {
    label: '30',
    value: 'count',
    isSelected: false,
  },
  {
    label: '40',
    value: 'count',
    isSelected: false,
  },
  {
    label: '50',
    value: 'count',
    isSelected: false,
  },
]

const handleIncrement = (props: PaginationProps, state: PaginationState) => {
  console.info('[Story/Pagination] handleIncrement() called')
  state.incrementCount(props.paginationLimit)
}

const handleDecrement = (props: PaginationProps, state: PaginationState) => {
  console.info('[Story/Pagination] handleDecrement() called')
  state.decrementCount()
}

const handlePaginationInputChange = (args) => {
  console.info('[Story/Pagination] handlePaginationInputChange() called')
  console.dir(args)
}

const handlePaginationInputBlur = (args) => {
  console.info('[Story/Pagination] handlePaginationInputBlur() called')
  console.dir(args)
}

const explicitHandleDropdownChange = (args) => {
  console.info('[Story/Pagination] handleDropdownChange() called')
  console.dir(args)
}

// const handleDropdownChange = (event: Event, item: Object, state: PaginationState, props: PaginationProps) => {
//   const { onDropdownChange } = props
//   console.info('[Pagination] onDropdsownChange()')
//   if (isFunction(onDropdownChange)) {
//     const changeArgs = { type: 'dropdown', state, event, item }
//     // console.info('[Pagination] props.onChange() ==== onDropDownChange()')
//     // console.dir(changeArgs)
//     onDropdownChange(changeArgs)
//   } else {
//     console.warn('[Pagination] no onDropdsownChange')
//   }
// }

// const renderDropDown = (props: PaginationProps, state: PaginationState) => {
//   const onChange = (event, item) => handleDropdownChange(event, item, state, props)
//   const paginationProps = {
//     // ...props,
//     // state: props.state,
//     // @todo !!! this needs to have these in props
//     // @todo person who made pagination preset
//     // ^ need to test the presets
//     // the same as someone using it functionally in the story
//     isDisabled: props.isDisabled,

//     // onChange: onChange,
//     // onClickOutside: props.onClickOutside,

//     options: props.List,
//     shouldBeAbsolute: true,
//     dropDownAlignmentType: 'top',
//   }

//   return <PaginationDropDown  {...paginationProps} />
// }

storiesOf('presets/Pagination', module)
  .add('default', () => <Pagination />)
  .add('with pagiantion limit', () =>
    <Pagination
      paginationLimit={5}
    />)
  .add('with custom dropdown list', () =>
    <Pagination
        list={productsPerPageList}
    />)
  .add('with defaultIndex', () =>
    <Pagination
      paginationLimit={3}
      defaultIndex={3}
    />)

  // !!!! WE DON'T MIX AND MATCH
  // THE SEPARATION SHOULD BE CLEAR
  // EITHER WE DO `ONINCREMENT,ONDECREMENT,ONPAGINATIONINPUTCHANGE`.... WHICH IS LAME
  // or we do renderDropdown + renderInput
  .add('with custom handlers', () =>
    <Pagination
      onIncrement={handleIncrement}
      onDecrement={handleDecrement}
      onPaginationInputChange={handlePaginationInputChange}
      onPaginationInputBlur={handlePaginationInputBlur}
      onDropdownChange={explicitHandleDropdownChange}
    />)
  .add('with handlers top level view ', () =>
    <Pagination
      onPaginationInputChange={handlePaginationInputChange}
      onPaginationInputBlur={handlePaginationInputBlur}
      onDropdownChange={explicitHandleDropdownChange}
      // renderDropDown={renderDropDown}
  />)
  .add('Pagination Issue on rendering top and button view together', () => (
    <React.Fragment>
      <Pagination
        paginationLimit={2}
        onDropdownChange={explicitHandleDropdownChange}
      />
      <Pagination
        // onDropdownChange={explicitHandleDropdownChange}
        // renderDropDown={renderDropDown}
      />
    </React.Fragment>)
  )
  .add('Two Bottom View Dropdown', () => (
    <React.Fragment>
      <Pagination
        onDropdownChange={explicitHandleDropdownChange}
      />
      <Pagination
        onDropdownChange={explicitHandleDropdownChange}
      />
    </React.Fragment>
  ))