import React, { Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectors } from '../../features/skills'
import { Skill } from '../../features/skills/types'
import { actionTypes } from '../../features/skills'
import { getMaxValueFromArray } from '../../utils'
import Creatable from 'react-select/creatable'
import { Row } from 'react-sticky-table'

type SkillsProps = { onChange: (skills: Skill[]) => void }

type SkillProps = {
  value: Skill
  onChange: (skills: Skill[]) => void
  onCreate: (s: string) => void
  skills: Skill[]
}

const SkillComponent: React.FC<SkillProps> = (props: SkillProps) => {
  const onCreatableChange = (value: any) => {
    props.onChange(value)
  }

  const toOption = (skill: Skill) => {
    return {
      value: skill.id,
      label: skill.label,
    }
  }

  return (
    <Row>
      <Fragment>
        <Creatable
          value={toOption(props.value)}
          options={props.skills.map(toOption)}
          onChange={onCreatableChange}
          onCreateOption={props.onCreate}
        />
        <input type={'number'}></input>
      </Fragment>
    </Row>
  )
}

const Skills: React.FC<SkillsProps> = props => {
  const dispatch = useDispatch()

  const onCreateOption = (value: string) => {
    const payload = {
      id: getMaxValueFromArray(skills, s => s.id) + 1,
      label: value,
      employeesRequired: 0,
    }
    dispatch({
      type: actionTypes.ADD_SKILL,
      payload: payload,
    })
    props.onChange(skills.concat(payload))
  }

  const skills = useSelector(selectors.getSkills)
  return (
    <Fragment>
      {skills.map((skill: Skill) => (
        <SkillComponent
          value={skill}
          onChange={props.onChange}
          onCreate={onCreateOption}
          skills={skills}
        />
      ))}
      <SkillComponent
        value={{
          id: getMaxValueFromArray(skills, (s: Skill) => s.id),
          label: '',
          employeesRequired: 0,
        }}
        onChange={props.onChange}
        onCreate={onCreateOption}
        skills={skills}
      />
    </Fragment>
  )
}

export default Skills