'use client'

import { useState, useRef, useEffect } from 'react'
import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { canvasState } from '@/store/canvasAtom'
import { useSwal } from '@/hooks/useSwal'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { POLYGON_TYPE } from '@/common/common'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import OpenSpace from '@/components/floor-plan/modal/object/type/OpenSpace'
import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDormer'
import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'

export default function ObjectSetting({ setShowObjectSettingModal }) {
  const { getMessage } = useMessage()
  const canvas = useRecoilValue(canvasState)
  const [buttonAct, setButtonAct] = useState(1)
  const { swalFire } = useSwal()
  const { applyOpeningAndShadow, applyDormers } = useObjectBatch()

  const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)

  //오브젝트 배치로 넘어오면 면형상 선택 불가
  useEffect(() => {
    canvas.discardActiveObject()
    surfaceShapePolygons.forEach((obj) => {
      obj.set({ selectable: false })
    })
  }, [])

  /**
   * 개구배치, 그림자배치
   */
  const objectPlacement = {
    typeRef: useRef([]), //프리입력, 치수입력
    widthRef: useRef(null),
    heightRef: useRef(null),
    isCrossRef: useRef(null),
  }

  const dormerPlacement = {
    widthRef: useRef(null),
    heightRef: useRef(null),
    pitchRef: useRef(null),
    offsetRef: useRef(null),
    offsetWidthRef: useRef(null),
    directionRef: useRef(null),
  }

  const applyObject = () => {
    // if (surfaceShapePolygons.length === 0) {
    //   swalFire({ text: '지붕이 없어요 지붕부터 그리세요', icon: 'error' })
    //   return
    // }

    //개구배치, 그림자배치

    console.log(surfaceShapePolygons)

    if (buttonAct === 1 || buttonAct === 2) {
      applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
    } else {
      applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
    }
  }

  const buttonMenu = [
    { id: 1, name: getMessage('modal.object.setting.type.open.space.placement') },
    { id: 2, name: getMessage('modal.object.setting.type.shadow.placement') },
    { id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
    { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
  ]
  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
      <div className={`modal-pop-wrap lrr`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
          <button className="modal-close" onClick={() => setShowObjectSettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="modal-btn-wrap">
            {buttonMenu.map((item) => (
              <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
                {item.name}
              </button>
            ))}
          </div>
          <div className="properties-setting-wrap outer">
            <div className="setting-tit">{getMessage('setting')}</div>
            {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
            {buttonAct === 2 && <Shadow ref={objectPlacement} />}
            {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
            {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
          </div>
          <div className="grid-btn-wrap">
            <button
              className="btn-frame modal act"
              onClick={() => {
                applyObject()
              }}
            >
              {getMessage('write')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}