import React, { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { POLYGON_TYPE } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import { useRoofFn } from '@/hooks/common/useRoofFn'

export default function FirstOption(props) {
  const { getMessage } = useMessage()
  // const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
  let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
  const { initEvent } = useEvent()
  const { setSurfaceShapePattern } = useRoofFn()

  // 데이터를 최초 한 번만 조회
  useEffect(() => {
    console.log('FirstOption useEffect 실행')
    setSettingsDataSave({ ...settingsData })
  }, [])

  const onClickOption = async (item) => {
    let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay
    let option1 = settingModalFirstOptions?.option1
    let option2 = settingModalFirstOptions?.option2

    //치수 표시(단 건 선택)
    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
      dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.map((option) => {
        option.selected = option.id === item.id
        return option
      })

      // setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })

      //화면 표시(단 건 선택)
    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
      option2 = settingModalFirstOptions?.option2.map((option) => {
        option.selected = option.id === item.id
        return option
      })

      // setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })

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

      polygons.forEach((polygon) => {
        setSurfaceShapePattern(polygon, item.column, false, polygon.roofMaterial, true, true)
      })
      //디스플레이 설정 표시(단 건 선택)
    } else {
      option1 = settingModalFirstOptions?.option1.map((option) => {
        if (option.id === item.id) {
          option.selected = !option.selected
        }
        return option
      })

      // setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
    }

    setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
  }

  // useEffect(() => {
  //   console.log('🚀 ~ useEffect ~ initEvent:')
  //   initEvent()
  // }, [onClickOption])

  return (
    <>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
        <div className="flex-check-box for2">
          {settingModalFirstOptions &&
            settingModalFirstOptions.option1.map((item) => (
              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                <span className="check-area"></span>
                <span className="title-area">{getMessage(item.name)}</span>
              </button>
            ))}
        </div>
      </div>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
        <div className="flex-check-box for-line">
          {settingModalFirstOptions &&
            settingModalFirstOptions.dimensionDisplay.map((item) => (
              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                <span className="check-area"></span>
                <span className="title-area">{getMessage(item.name)}</span>
              </button>
            ))}
        </div>
      </div>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
        <div className="flex-check-box for-line">
          {settingModalFirstOptions &&
            settingModalFirstOptions.option2.map((item) => (
              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                <span className="check-area"></span>
                <span className="title-area">{getMessage(item.name)}</span>
              </button>
            ))}
        </div>
      </div>
    </>
  )
}