'use client'

import { Select, SelectItem } from '@nextui-org/react'
import { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'

export default function RoofSelect() {
  const [roofMaterials, setRoofMaterials] = useState([])
  const [manufacturers, setManufacturers] = useState([])
  const [trestles, setTrestles] = useState([])
  const [modules, setModules] = useState([])
  const [originTrestles, setOriginTrestles] = useState([])

  const [roofMaterialId, setRoofMaterialId] = useState(null)
  const [manufacturerId, setManufacturerId] = useState(null)
  const [trestleId, setTrestleId] = useState(null)

  const { get } = useAxios()

  useEffect(() => {
    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
      //TODO: error handling
      if (!res) return

      setRoofMaterials(res)
    })
  }, [])

  useEffect(() => {
    if (!roofMaterialId) {
      return
    }

    get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => {
      if (res.length === 0) {
        return
      }
      setOriginTrestles(res)
      const manufactural = res.map((trestle) => {
        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
      })
      // Remove duplicates
      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
        return manufactural.find((a) => a.id === id)
      })

      setManufacturers(uniqueManufactural)
    })
  }, [roofMaterialId])

  useEffect(() => {
    if (!manufacturerId) {
      return
    }

    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
    setTrestles(trestles)
  }, [manufacturerId])

  useEffect(() => {
    if (!trestleId) {
      return
    }
    get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => {
      if (res.length === 0) {
        return
      }
      setModules(res)
    })
  }, [trestleId])

  const handleRoofMaterialOnChange = (e) => {
    const roofMaterialId = e.target.value
    setRoofMaterialId(roofMaterialId)
    setManufacturers([])
    setManufacturerId(null)
    setTrestleId(null)
    setTrestles([])
    setModules([])
  }

  const handleManufacturersOnChange = (e) => {
    const manufacturerId = Number(e.target.value)
    setTrestles([])
    setManufacturerId(manufacturerId)
    setTrestleId(null)
    setModules([])
  }

  const handleTrestlesOnChange = (e) => {
    const trestleId = Number(e.target.value)
    setTrestleId(trestleId)
    setModules([])
  }

  return (
    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
      {roofMaterials.length > 0 && (
        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
          {roofMaterials.map((roofMaterial) => (
            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
          ))}
        </Select>
      )}
      {manufacturers.length > 0 && (
        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
          {manufacturers.map((manufacturer) => (
            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
          ))}
        </Select>
      )}
      {trestles.length > 0 && (
        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
          {trestles.map((trestle) => (
            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
          ))}
        </Select>
      )}
      {modules.length > 0 && (
        <Select label="설치가능 모듈" className="max-w-xs">
          {modules.map((module) => (
            <SelectItem key={module.id}>{module.name}</SelectItem>
          ))}
        </Select>
      )}
    </div>
  )
}