import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { splitPolygonWithLines } from '@/util/qpolygon-utils'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { roofDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'

// 지붕면 할당
export function useRoofAllocationSetting(id) {
  const canvas = useRecoilValue(canvasState)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const { drawDirectionArrow } = usePolygon()
  const { closePopup } = usePopup()

  const { swalFire } = useSwal()

  const roofMaterials = [
    {
      id: 'A',
      name: '기와1',
      type: 'A',
      width: '200',
      length: '200',
      alignType: 'parallel',
    },
    {
      id: 'B',
      name: '기와2',
      type: 'B',
      rafter: '200',
      alignType: 'parallel',
    },
    {
      id: 'C',
      name: '기와3',
      type: 'C',
      hajebichi: '200',
      alignType: 'stairs',
    },
    {
      id: 'D',
      name: '기와4',
      type: 'D',
      length: '200',
      alignType: 'stairs',
    },
  ]
  const widths = [
    { name: '200', id: 'q' },
    { name: '250', id: 'q1' },
    { name: '300', id: 'q2' },
  ]
  const lengths = [
    { name: '200', id: 'w' },
    { name: '250', id: 'w1' },
    { name: '300', id: 'w2' },
  ]
  const rafters = [
    { name: '200', id: 'e' },
    { name: '250', id: 'e1' },
    { name: '300', id: 'e2' },
  ]

  const [values, setValues] = useState([
    {
      id: 'A',
      type: 'A',
      roofMaterial: { name: '기와1' },
      width: { name: '200' },
      length: { name: '250' },
      rafter: { name: '300' },
      alignType: 'stairs',
    },
  ])

  const [radioValue, setRadioValue] = useState('A')

  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(roofMaterials[0])

  useEffect(() => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
    if (roofBases.length === 0) {
      swalFire({ text: '할당할 지붕이 없습니다.' })
      closePopup(id)
    }
    // if (type === 'roofBase') {
    //   // 지붕면 할당
    //
    // } else if ('roof') {
    //   // 지붕재 변경
    // }
  }, [])

  const onAddRoofMaterial = () => {
    setValues([...values, selectedRoofMaterial])
  }

  const onDeleteRoofMaterial = (id) => {
    setValues(values.filter((value) => value.id !== id))
  }

  // 선택한 지붕재로 할당
  const handleSave = () => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
    roofBases.forEach((roofBase) => {
      try {
        splitPolygonWithLines(roofBase)
      } catch (e) {
        return
      }

      roofBase.innerLines.forEach((line) => {
        canvas.remove(line)
      })

      canvas.remove(roofBase)
    })

    wallLines.forEach((wallLine) => {
      canvas.remove(wallLine)
    })

    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')

    roofs.forEach((roof) => {
      setSurfaceShapePattern(roof, roofDisplay.column)
      drawDirectionArrow(roof)
    })
    closePopup(id)
  }

  const handleRadioOnChange = (e) => {
    setRadioValue(e.target)
  }

  return {
    handleSave,
    onAddRoofMaterial,
    onDeleteRoofMaterial,
    handleRadioOnChange,
    widths,
    lengths,
    rafters,
    values,
    roofMaterials,
    selectedRoofMaterial,
    setSelectedRoofMaterial,
    radioValue,
    setRadioValue,
  }
}