import React, { useEffect, useState } from "react"
import { useRouter } from "next/router"
import { useSnapshot } from "valtio"

import { appState } from "~utils/appState"
import { jobGroups } from "~utils/jobGroups"

import "./index.scss"

// Props
interface Props {
  currentJob?: string
  onChange?: (job?: Job) => void
  onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
}

type GroupedJob = { [key: string]: Job[] }

const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
  function useFieldSet(props, ref) {
    // Set up router for locale
    const router = useRouter()
    const locale = router.locale || "en"

    // Create snapshot of app state
    const { party } = useSnapshot(appState)

    // Set up local states for storing jobs
    const [currentJob, setCurrentJob] = useState<Job>()
    const [jobs, setJobs] = useState<Job[]>()
    const [sortedJobs, setSortedJobs] = useState<GroupedJob>()

    // Set current job from state on mount
    useEffect(() => {
      setCurrentJob(party.job)
    }, [])

    // Organize jobs into groups on mount
    useEffect(() => {
      const jobGroups = appState.jobs
        .map((job) => job.row)
        .filter((value, index, self) => self.indexOf(value) === index)
      let groupedJobs: GroupedJob = {}

      jobGroups.forEach((group) => {
        groupedJobs[group] = appState.jobs.filter((job) => job.row === group)
      })

      setJobs(appState.jobs)
      setSortedJobs(groupedJobs)
    }, [appState])

    // Set current job on mount
    useEffect(() => {
      if (jobs && props.currentJob) {
        const job = appState.jobs.find((job) => job.id === props.currentJob)
        setCurrentJob(job)
      }
    }, [appState, props.currentJob])

    // Enable changing select value
    function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
      if (jobs) {
        const job = jobs.find((job) => job.id === event.target.value)
        if (props.onChange) props.onChange(job)
        setCurrentJob(job)
      }
    }

    // Render JSX for each job option, sorted into optgroups
    function renderJobGroup(group: string) {
      const options =
        sortedJobs &&
        sortedJobs[group].length > 0 &&
        sortedJobs[group]
          .sort((a, b) => a.order - b.order)
          .map((item, i) => {
            return (
              <option key={i} value={item.id}>
                {item.name[locale]}
              </option>
            )
          })

      const groupName = jobGroups.find((g) => g.slug === group)?.name[locale]

      return (
        <optgroup key={group} label={groupName}>
          {options}
        </optgroup>
      )
    }

    return (
      <select
        key={currentJob ? currentJob.id : -1}
        value={currentJob ? currentJob.id : -1}
        onBlur={props.onBlur}
        onChange={handleChange}
        ref={ref}
      >
        <option key="no-job" value={-1}>
          No class
        </option>
        {sortedJobs
          ? Object.keys(sortedJobs).map((x) => renderJobGroup(x))
          : ""}
      </select>
    )
  }
)

export default JobDropdown