'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 [trestles, setTrestles] = useState([])

  const { get } = useAxios()

  const handleRoofMaterialOnChange = (e) => {
    const id = e.target.value
    setTrestles([])
    get({ url: `/api/trestle/v1.0/trestles/${id}` }).then((res) => {
      setTrestles(res)
    })
  }

  useEffect(() => {
    get({ url: '/api/roof-material/v1.0/roof-materials' }).then((res) => {
      setRoofMaterials(res)
    })
  }, [])
  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>
        )}

        {trestles.length > 0 && (
          <Select label="가대" className="max-w-xs">
            {trestles.map((trestle) => (
              <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
            ))}
          </Select>
        )}
      </div>
    </>
  )
}