import React, { useEffect, useState } from 'react'

import api from '~utils/api'

import './index.scss'

// Props
interface Props {
  currentValue?: WeaponKey
  series: number
  slot: number
  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
  onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
}

const WeaponKeyDropdown = React.forwardRef<HTMLSelectElement, Props>(
  function useFieldSet(props, ref) {
    const [keys, setKeys] = useState<WeaponKey[][]>([])
    const [currentKey, setCurrentKey] = useState('')

    const pendulumNames = [
      { en: 'Pendulum', jp: '' },
      { en: 'Chain', jp: '' },
    ]

    const telumaNames = [{ en: 'Teluma', jp: '' }]
    const emblemNames = [{ en: 'Emblem', jp: '' }]
    const gauphNames = [
      { en: 'Gauph Key', jp: '' },
      { en: 'Ultima Key', jp: '' },
      { en: 'Gate of Omnipotence', jp: '' },
    ]

    useEffect(() => {
      if (props.currentValue) setCurrentKey(props.currentValue.id)
    }, [props.currentValue])

    useEffect(() => {
      const filterParams = {
        params: {
          series: props.series,
          slot: props.slot,
        },
      }

      function organizeWeaponKeys(weaponKeys: WeaponKey[]) {
        const numGroups = Math.max.apply(
          Math,
          weaponKeys.map((key) => key.group)
        )
        let groupedKeys = []
        for (let i = 0; i <= numGroups; i++) {
          groupedKeys[i] = weaponKeys.filter((key) => key.group == i)
        }

        setKeys(groupedKeys)
      }

      function fetchWeaponKeys() {
        api.endpoints.weapon_keys.getAll(filterParams).then((response) => {
          const keys = response.data.map((k: any) => k.weapon_key)
          organizeWeaponKeys(keys)
        })
      }

      fetchWeaponKeys()
    }, [props.series, props.slot])

    function weaponKeyGroup(index: number) {
      ;['α', 'β', 'γ', 'Δ'].sort((a, b) => a.localeCompare(b, 'el'))

      const sortByOrder = (a: WeaponKey, b: WeaponKey) =>
        a.order > b.order ? 1 : -1

      const options =
        keys &&
        keys.length > 0 &&
        keys[index].length > 0 &&
        keys[index].sort(sortByOrder).map((item, i) => {
          return (
            <option key={i} value={item.id}>
              {item.name.en}
            </option>
          )
        })

      let name: { [key: string]: string } = {}
      if (props.series == 2 && index == 0) name = pendulumNames[0]
      else if (props.series == 2 && props.slot == 1 && index == 1)
        name = pendulumNames[1]
      else if (props.series == 3) name = telumaNames[index]
      else if (props.series == 17) name = gauphNames[props.slot]
      else if (props.series == 22) name = emblemNames[index]

      return (
        <optgroup
          key={index}
          label={
            props.series == 17 && props.slot == 2 ? name.en : `${name.en}s`
          }
        >
          {options}
        </optgroup>
      )
    }

    function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
      if (props.onChange) props.onChange(event)

      setCurrentKey(event.currentTarget.value)
    }

    const emptyOption = () => {
      let name = ''
      if (props.series == 2) name = pendulumNames[0].en
      else if (props.series == 3) name = telumaNames[0].en
      else if (props.series == 17) name = gauphNames[props.slot].en
      else if (props.series == 22) name = emblemNames[0].en

      return `No ${name}`
    }

    return (
      <select
        key={`weapon-key-${props.slot}`}
        value={currentKey}
        onBlur={props.onBlur}
        onChange={handleChange}
        ref={ref}
      >
        <option key="-1" value="-1">
          {emptyOption()}
        </option>
        {Array.from(Array(keys?.length)).map((x, i) => {
          return weaponKeyGroup(i)
        })}
      </select>
    )
  }
)

export default WeaponKeyDropdown