/**
 * @file @todo split up
 * @file @todo select dropdown in src/ui styled with presets
 */
import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP, EMPTY_ARRAY } from 'exotic'
import { firstToUpperCase } from 'chain-able-boost'
import { styled } from 'styleh-components'
import { ColorSelectDropDown } from 'presets/ColorSelectDropDown'
import {
  SelectDropDown as Select,
  ActiveOptionProps,
  ActiveOption,
} from '@skava/ui/dist/components/molecules/SelectDropDown'
import { convertToOptionFor } from '../deps'
import { SelectOptionsProps } from './typing'

const renderActiveItem = (props: ActiveOptionProps, state: SelectableState) => {
  const attributes = { ...props }
  if (!props.label) {
    attributes.label = props.type
  }
  if (state.isVisible) {
    attributes.label = props.type
    attributes.isVisible = state.isVisible
  }
  return <ActiveOption {...attributes} />
}

const SelectAdapter = props => (
  <Select {...props} renderActiveItem={renderActiveItem} />
)
const StyledSelect = styled(SelectAdapter) `
  span {
    width: 100%;
  }
`
function toLabel(type: string) {
  switch (type) {
    case 'style':
      return 'Fit'
    case 'color':
      return 'Color'
    case 'size1':
      return 'Size'
    default:
      return firstToUpperCase(type)
  }
}

const removeDisabled = option => !option.isDisabled

@observer
export default class SelectOption extends React.Component<SelectOptionsProps> {
  static defaultProps = {
    selectedValue: undefined,
    onClick: NO_OP,
    list: EMPTY_ARRAY,
    type: '',
  }

  get attributes() {
    const { list, onClick, type } = this.props
    const convertToOption = convertToOptionFor(type)
    const options = list.filter(removeDisabled).map(convertToOption)

    return {
      options,
      onChange: onClick,
      // @todo needs more fix
      type: toLabel(type),
      // label: toLabel(type),
    }
  }

  get view() {
    const { attributes } = this
    if (attributes.type === 'Color') {
      return (
        <ColorSelectDropDown
          {...attributes}
          renderActiveItem={renderActiveItem}
        />
      )
    } else {
      return <StyledSelect {...attributes} />
    }
  }

  render() {
    const { view } = this
    return view
  }
}