import React from 'react'
import { isObj } from 'exotic'
import { omit } from '@skava/utils'
import { SelectableState } from '@skava/ui/dist/state/SelectionState'
import {
  OptionProps,
} from '@skava/ui/dist/components/molecules/SelectDropDown/Option/typings'
import {
  ActiveOption,
  ActiveOptionProps,
  SelectText,
} from '@skava/ui/dist/components/molecules/SelectDropDown'
import { colorList as options } from './fixture'
import { ColorSelectDropDownProps, ColorOptionType } from './typings'
import {
  StyledColorSelectDropDown,
  ColorItemContent,
  ColorOption,
} from './styled'

const isColor = (obj: ColorOptionType): boolean => {
  return isObj(obj) && obj.type === 'color'
}

const renderBeforeText = (props: OptionProps) => {
  if (isColor(props) === true) {
    return <ColorItemContent value={props.value} />
  }
  return ''
}

const renderItem = (itemProps, state) => {
  const { label, value, ...remainingProps } = itemProps
  const color = renderBeforeText(itemProps)
  const text = <SelectText>{label}</SelectText>

  return <ColorOption onClick={itemProps.onClick} {...remainingProps}>{color}{text}</ColorOption>
}

class ColorSelectDropDown extends React.Component<ColorSelectDropDownProps> {
  static defaultProps = {
    className: '',
    options,
  }

  renderActiveItem = (props: ActiveOptionProps, state: SelectableState) => {
    const { label } = this.props
    return <ActiveOption label={label} state={state} {...props} />
  }

  render() {
    const passThroughProps = omit(this.props, ['label'])
    return (
      <StyledColorSelectDropDown
        renderItem={renderItem}
        renderActiveItem={this.renderActiveItem}
        {...passThroughProps}
      />
    )
  }
}

export { ColorSelectDropDown }
export default ColorSelectDropDown