import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { roofDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'
import { POLYGON_TYPE } from '@/common/common'
import { v4 as uuidv4 } from 'uuid'
import ActualSizeSetting from '@/components/floor-plan/modal/roofAllocation/ActualSizeSetting'
import { useMessage } from '@/hooks/useMessage'
import useMenu from '@/hooks/common/useMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { menuTypeState } from '@/store/menuAtom'

// 지붕면 할당
export function useRoofAllocationSetting(id) {
  const canvas = useRecoilValue(canvasState)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const { drawDirectionArrow, addLengthText, splitPolygonWithLines } = usePolygon()
  const [popupId, setPopupId] = useState(uuidv4())
  const { addPopup, closePopup, closeAll } = usePopup()
  const { getMessage } = useMessage()
  const currentObject = useRecoilValue(currentObjectState)
  const { swalFire } = useSwal()
  const { setMenuNumber } = useCanvasMenu()
  const setMenuType = useSetRecoilState(menuTypeState)
  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 [editingLines, setEditingLines] = useState([])

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

  useEffect(() => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines

    roofBases.forEach((roof) => {
      roof.innerLines.forEach((line) => {
        if (!line.attributes.actualSize || line.attributes?.actualSize === 0) {
          line.set({
            strokeWidth: 4,
            stroke: 'black',
            selectable: true,
          })
        }

        if (editingLines.includes(line)) {
          line.set({
            strokeWidth: 2,
            stroke: 'black',
            selectable: true,
          })
        }
      })
    })
    if (currentObject && currentObject.name && ['auxiliaryLine', 'ridge', 'hip'].includes(currentObject.name)) {
      currentObject.set({
        strokeWidth: 4,
        stroke: '#EA10AC',
      })
    }
  }, [currentObject])

  useEffect(() => {
    // canvas.getObjects().filter((obj) => obj.type === 'QLine')
    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
    if (roofBases.length === 0) {
      swalFire({ text: '할당할 지붕이 없습니다.' })
      closePopup(id)
    }
  }, [])

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

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

  const { handleMenu } = useMenu()
  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)

  // 선택한 지붕재로 할당
  const handleSave = () => {
    // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
    if (checkInnerLines()) {
      addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
    } else {
      apply()
    }
  }

  const handleAlloc = () => {
    if (!checkInnerLines()) {
      apply()
    } else {
      swalFire({
        type: 'alert',
        icon: 'error',
        text: getMessage('실제치수를 입력해 주세요.'),
      })
    }
  }

  const checkInnerLines = () => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
    let result = false

    roofBases.forEach((roof) => {
      roof.innerLines.forEach((line) => {
        if (!line.attributes.actualSize || line.attributes?.actualSize === 0) {
          line.set({
            strokeWidth: 4,
            stroke: 'black',
            selectable: true,
          })
          result = true
        }
      })
    })
    if (result) canvas?.renderAll()

    return result
  }

  const apply = () => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && !obj.isFixed)
    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
    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) => {
      if (roof.isFixed) return
      roof.set({
        isFixed: true,
      })
      setSurfaceShapePattern(roof, roofDisplay.column)
      drawDirectionArrow(roof)
    })

    const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine')
    removeTargets.forEach((obj) => {
      canvas.remove(obj)
    })
    setEditingLines([])
    closeAll()
    setMenuNumber(3)
    setMenuType('surface')
  }

  const setLineSize = (id, size) => {
    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
    roofBases.forEach((roof) => {
      roof.innerLines.forEach((line) => {
        if (id === line.id) {
          setEditingLines([...editingLines.filter((editLine) => editLine.id !== line.id), line])
          line.attributes.actualSize = size
          line.set({
            strokeWidth: 2,
            stroke: 'black',
          })
        }
      })
    })

    canvas?.renderAll()
  }

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

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