import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'react-i18next'

import { skillGroups } from '~utils/skillGroups'

import './index.scss'

interface Props {
  sendFilters: (filters: { [key: string]: number }) => void
}

const JobSkillSearchFilterBar = (props: Props) => {
  // Set up translation
  const { t } = useTranslation('common')

  const [currentGroup, setCurrentGroup] = useState(-1)

  function onChange(event: React.ChangeEvent<HTMLSelectElement>) {
    setCurrentGroup(parseInt(event.target.value))
  }

  function onBlur(event: React.ChangeEvent<HTMLSelectElement>) {}

  function sendFilters() {
    const filters = {
      group: currentGroup,
    }

    props.sendFilters(filters)
  }

  useEffect(() => {
    sendFilters()
  }, [currentGroup])

  return (
    <div className="SearchFilterBar">
      <select
        key="job-skill-groups"
        value={currentGroup}
        onBlur={onBlur}
        onChange={onChange}
      >
        <option key="all" value={-1}>
          {t(`job_skills.all`)}
        </option>
        <option key="damaging" value={2}>
          {t(`job_skills.damaging`)}
        </option>
        <option key="buffing" value={0}>
          {t(`job_skills.buffing`)}
        </option>
        <option key="debuffing" value={1}>
          {t(`job_skills.debuffing`)}
        </option>
        <option key="healing" value={3}>
          {t(`job_skills.healing`)}
        </option>
        <option key="emp" value={4}>
          {t(`job_skills.emp`)}
        </option>
        <option key="base" value={5}>
          {t(`job_skills.base`)}
        </option>
      </select>
    </div>
  )
}

export default JobSkillSearchFilterBar