import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { EMPTY_ARRAY, isFunction, NO_OP } from 'exotic'
import { OnSubmitStrategyArgs } from '@skava/forms/build/dist/src/new-forms/forms'
import { SelectableState } from 'src/state/SelectionState'
import { ActiveOption, ActiveOptionProps } from 'molecules/SelectDropDown'
import {
  defaultRenderButtonGroup,
  defaultRenderCreateForm,
  defaultRenderItem,
  defaultRenderList,
} from './renderProps'
import { StyledSelectDropDown } from './styled'
import { ShoppingListProps } from './typings'

@observer
class ShoppingListDropDown extends React.Component<ShoppingListProps> {
  static defaultProps = {
    className: '',
    list: EMPTY_ARRAY,
    // renderProps
    renderButtonGroup: defaultRenderButtonGroup,
    renderItem: defaultRenderItem,
    renderList: defaultRenderList,
  }

  renderActiveItem = (props: ActiveOptionProps, state: SelectableState) => {
    const { label = 'Move', onActiveItemClick } = this.props
    const { onClick, ...remainingProps } = props

    const handleClick = args => {
      onClick(args)
      if (isFunction(onActiveItemClick)) {
        onActiveItemClick(args)
      }
    }

    return (
      <ActiveOption
        label={label}
        state={state}
        onClick={handleClick}
        {...remainingProps}
      />
    )
  }

  handleSubmit = (args: OnSubmitStrategyArgs) => {
    const {
      onFormSubmit,
      productItemDetails,
      identifier: listIdentifier,
      onActiveItemClick,
    } = this.props

    if (isFunction(onActiveItemClick)) {
      onActiveItemClick(args)
    }
    if (isFunction(onFormSubmit)) {
      onFormSubmit({ ...args, listIdentifier, productItemDetails })
    }
  }

  render() {
    const {
      renderList,
      className,
      onActiveItemClick,
      ...remainingProps
    } = this.props
    return (
      <StyledSelectDropDown
        className={className}
        renderActiveItem={this.renderActiveItem}
        renderList={renderList}
        shouldBeAbsolute={true}
        onSubmit={this.handleSubmit}
        onBlur={onActiveItemClick}
        renderCreateForm={defaultRenderCreateForm}
        onActiveItemClick={onActiveItemClick}
        {...remainingProps}
      />
    )
  }
}

export { ShoppingListDropDown }
export default ShoppingListDropDown