import React, { useEffect, useState } from 'react'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useMessage } from '@/hooks/useMessage'
import { POLYGON_TYPE } from '@/common/common'
import { setSurfaceShapePattern } from '@/util/canvas-util'

export default function FirstOption() {
  const { getMessage } = useMessage()
  const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
  const { option1, option2, dimensionDisplay } = settingModalFirstOptions

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

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

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

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

      polygons.forEach((polygon) => {
        setSurfaceShapePattern(polygon, item.column)
      })
      //디스플레이 설정 표시(단 건 선택)
    } else {
      item.selected = !item.selected
    }

    setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
  }

  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>
    </>
  )
}