import React from 'react'
import { isSafe, isFunction } from 'exotic'
import { OnSubmitStrategyArgs } from '@skava/forms/build/dist/src/new-forms/forms'
import { OneFormState } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { PluginsContext } from '@skava/forms/build/dist/src/new-forms/plugins/PluginsContext'
import { SelectableState } from 'src/state/SelectionState'
import { toText } from 'molecules/SelectDropDown/meta/_deps'
import { SelectProps, Option } from 'molecules/SelectDropDown'
import {
  SelectText,
  OptionState,
  OptionType,
} from 'molecules/SelectDropDown/Option'
import {
  StyledTextPlugin,
  StyledOneObserverForm,
  StyledPlusIcon,
} from './styled'
import { OptionProps } from './typings'

function defaultRenderButtonGroup(props) {
  const { iconType, onSubmit } = props

  const handleSubmit = (args: OnSubmitStrategyArgs) => {
    onSubmit(args)
  }
  const view = isSafe(iconType) === true &&
    iconType === 'plus' && <StyledPlusIcon type="add" onClick={handleSubmit} />
  return view
}

function defaultRenderCreateForm(props: OptionProps, state: OptionState) {
  const { label, renderButtonGroup, onSubmit, ...remainingProps } = props
  const inputsList = [
    {
      name: 'listName',
      type: 'text',
      label,
      'data-qa': 'qa-create-list-dropdown-textbox',
    },
  ]

  const handleSubmit = (args: OnSubmitStrategyArgs) => {
    onSubmit(args)
    state.handleToggleVisibility()
  }

  const formState = new OneFormState().setInputsList(inputsList)
  const view = (
    <PluginsContext.Provider value={[StyledTextPlugin]}>
      <StyledOneObserverForm
        state={formState}
        renderButtonGroup={renderButtonGroup}
        onSubmit={handleSubmit}
        {...remainingProps}
      />
    </PluginsContext.Provider>
  )
  return view
}

function defaultRenderText(props: OptionProps, state: OptionState) {
  const text = toText(props, state)
  const { shouldCreateForm, renderCreateForm, ...remainingProps } = props
  const option = (
    <React.Fragment>
      <SelectText isSelected={props.isSelected} isDisabled={props.isDisabled}>
        {text}
      </SelectText>
    </React.Fragment>
  )
  return shouldCreateForm === true
    ? renderCreateForm(remainingProps, state)
    : option
}

function defaultRenderItem(
  item: OptionType,
  props: SelectProps,
  state: SelectableState
) {
  const { onClick, shouldCreateForm } = item
  const {
    onActiveItemClick,
    productItemDetails,
    identifier: listIdentifier,
  } = props
  const handleClick = (value, item, selectionState) => {
    onClick({ value, productItemDetails, listIdentifier }, item, selectionState)
    if (isFunction(onActiveItemClick) && state.isVisible === false) {
      onActiveItemClick(value)
    }
  }

  return (
    <Option
      {...item}
      {...props}
      state={state}
      label={item.label}
      value={item.label}
      key={item.label}
      onClick={shouldCreateForm === true ? onClick : handleClick}
    />
  )
}

function defaultRenderList(props: SelectProps, state: SelectableState) {
  const passThroughProps = {
    renderText: defaultRenderText,
    ...props,
  }

  function toItemWithState(item: OptionType, index: number) {
    return props.renderItem(item, passThroughProps, state)
  }
  return props.list.map(toItemWithState)
}

export {
  defaultRenderButtonGroup,
  defaultRenderCreateForm,
  defaultRenderItem,
  defaultRenderList,
}