import { GlobalDataContext } from '@/app/GlobalDataProvider'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
import { useMessage } from '@/hooks/useMessage'
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { roofsState } from '@/store/roofAtom'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import Swal from 'sweetalert2'

const Trestle = forwardRef((props, ref) => {
  const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
  const { getMessage } = useMessage()
  // const [selectedTrestle, setSelectedTrestle] = useState()
  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  const pitchText = useRecoilValue(pitchTextSelector)
  const [selectedRoof, setSelectedRoof] = useState(null)
  const {
    trestleState,
    trestleDetail,
    dispatch,
    raftBaseList,
    trestleList,
    constMthdList,
    roofBaseList,
    constructionList,
    eavesMargin,
    ridgeMargin,
    kerabaMargin,
    setEavesMargin,
    setRidgeMargin,
    setKerabaMargin,
    lengthBase,
    setLengthBase,
    hajebichi,
    setHajebichi,
    cvrYn,
    cvrChecked,
    snowGdPossYn,
    snowGdChecked,
    setCvrYn,
    setCvrChecked,
    setSnowGdPossYn,
    setSnowGdChecked,
  } = useModuleTrestle({
    selectedRoof,
  })
  const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
  // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
  const [selectedRaftBase, setSelectedRaftBase] = useState(null)
  const [selectedTrestle, setSelectedTrestle] = useState(null)
  const [selectedConstMthd, setSelectedConstMthd] = useState(null)
  const [selectedConstruction, setSelectedConstruction] = useState(null)
  const [selectedRoofBase, setSelectedRoofBase] = useState(null)
  const { managementState } = useContext(GlobalDataContext)
  const { restoreModuleInstArea } = useModuleBasicSetting()
  const [flag, setFlag] = useState(false)
  const tempModuleSelectionData = useRef(null)

  useEffect(() => {
    if (roofs && !selectedRoof) {
      setSelectedRoof(roofs[0])
    }

    //모듈 설치 영역 복구
    restoreModuleInstArea()
  }, [roofs])

  useEffect(() => {
    if (flag && moduleSelectionData) {
      if (JSON.stringify(tempModuleSelectionData.current) === JSON.stringify(moduleSelectionData)) {
        setTabNum(tabNum + 1)
      }
    }
  }, [flag, moduleSelectionData])

  useEffect(() => {
    if (selectedRoof) {
      if (moduleSelectionData?.roofConstructions?.length >= selectedRoof.index + 1) {
        const { construction, trestle, trestleDetail } = moduleSelectionData?.roofConstructions[selectedRoof.index]
        dispatch({
          type: 'SET_INITIALIZE',
          roof: { common: moduleSelectionData.common, module: moduleSelectionData.module, construction, trestle, trestleDetail, ...selectedRoof },
        })
      } else {
        dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, common: moduleSelectionData.common, module: moduleSelectionData.module } })
      }
    }
  }, [selectedRoof])

  useEffect(() => {
    if (raftBaseList.length > 0) {
      setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
    } else {
      setSelectedRaftBase(null)
    }
  }, [raftBaseList])

  useEffect(() => {
    if (trestleList.length > 0) {
      setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
    } else {
      setSelectedTrestle(null)
    }
  }, [trestleList])

  useEffect(() => {
    if (roofBaseList.length > 0) {
      setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
    } else {
      setSelectedRoofBase(null)
    }
  }, [roofBaseList])

  useEffect(() => {
    if (constMthdList.length > 0) {
      setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
    } else {
      setSelectedConstMthd(null)
    }
  }, [constMthdList])

  useEffect(() => {
    if (constructionList.length > 0) {
      console.log(constructionList)
      setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null)
    } else {
      setSelectedConstruction(null)
    }
  }, [constructionList])

  const getConstructionState = (index) => {
    if (constructionList && constructionList.length > 0) {
      if (constructionList[index].constPossYn === 'Y') {
        if (trestleState && trestleState.constTp === constructionList[index].constTp) {
          return 'blue'
        }
        return 'white'
      }
      return 'no-click'
    }
    return 'no-click'
  }

  const onChangeRaftBase = (e) => {
    setSelectedRaftBase(e)
    dispatch({
      type: 'SET_RAFT_BASE',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: e.clCode,
      },
    })
  }

  const onChangeTrestleMaker = (e) => {
    setSelectedTrestle(e)
    dispatch({
      type: 'SET_TRESTLE_MAKER',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: selectedRaftBase?.clCode,
        trestleMkrCd: e.trestleMkrCd,
      },
    })
  }

  const onChangeConstMthd = (e) => {
    setSelectedConstMthd(e)
    dispatch({
      type: 'SET_CONST_MTHD',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: selectedRaftBase?.clCode,
        trestleMkrCd: selectedTrestle.trestleMkrCd,
        constMthdCd: e.constMthdCd,
      },
    })
  }

  const onChangeRoofBase = (e) => {
    setSelectedRoofBase(e)
    dispatch({
      type: 'SET_ROOF_BASE',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: selectedRaftBase?.clCode,
        trestleMkrCd: selectedTrestle.trestleMkrCd,
        constMthdCd: selectedConstMthd.constMthdCd,
        roofBaseCd: e.roofBaseCd,
        illuminationTp: managementState?.surfaceTypeValue ?? '',
        instHt: managementState?.installHeight ?? '',
        stdWindSpeed: managementState?.standardWindSpeedId ?? '',
        stdSnowLd: managementState?.verticalSnowCover ?? '',
        inclCd: selectedRoof?.pitch ?? 0,
        roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
      },
    })
  }

  const handleConstruction = (index) => {
    if (constructionList[index]?.constPossYn === 'Y') {
      dispatch({
        type: 'SET_CONSTRUCTION',
        roof: {
          moduleTpCd: selectedModules.itemTp ?? '',
          roofMatlCd: selectedRoof?.roofMatlCd ?? '',
          raftBaseCd: selectedRaftBase?.clCode,
          trestleMkrCd: selectedTrestle.trestleMkrCd,
          constMthdCd: selectedConstMthd.constMthdCd,
          roofBaseCd: selectedRoofBase.roofBaseCd,
          illuminationTp: managementState?.surfaceTypeValue ?? '',
          instHt: managementState?.installHeight ?? '',
          stdWindSpeed: managementState?.standardWindSpeedId ?? '',
          stdSnowLd: +managementState?.verticalSnowCover ?? '',
          inclCd: selectedRoof?.pitch ?? 0,
          roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
          constTp: constructionList[index].constTp,
          snowGdPossYn: constructionList[index].snowGdPossYn,
          cvrYn: constructionList[index].cvrYn,
          mixMatlNo: selectedModules.mixMatlNo,
          workingWidth: selectedRoof?.length?.toString() ?? '',
        },
      })

      setCvrYn(constructionList[index].cvrYn)
      setSnowGdPossYn(constructionList[index].snowGdPossYn)
      setCvrChecked(false)
      setSnowGdChecked(false)
    }
  }

  const handleChangeRoofMaterial = (index) => {
    const newAddedRoofs = roofs.map((roof, i) => {
      if (i === selectedRoof.index) {
        return {
          ...selectedRoof,
          hajebichi,
          lenBase: lengthBase,
          eavesMargin,
          ridgeMargin,
          kerabaMargin,
          roofIndex: selectedRoof.index,
          trestle: {
            hajebichi: hajebichi,
            length: lengthBase,
            ...selectedRaftBase,
            ...selectedTrestle,
            ...selectedConstMthd,
            ...selectedRoofBase,
          },
          construction: {
            ...constructionList.find((data) => data.constTp === trestleState.constTp),
            cvrYn: cvrYn,
            snowGdPossYn: snowGdPossYn,
            cvrChecked: cvrChecked,
            snowGdChecked: snowGdChecked,
            setupCover: cvrChecked ?? false,
            setupSnowCover: snowGdChecked ?? false,
          },
          trestleDetail: trestleDetail,
        }
      }
      return roof
    })
    setRoofs(newAddedRoofs)
    setSelectedRoof(newAddedRoofs[index])
  }

  const isComplete = async () => {
    const newAddedRoofs = roofs.map((roof, i) => {
      if (i === selectedRoof?.index) {
        return {
          ...selectedRoof,
          length: lengthBase,
          eavesMargin,
          ridgeMargin,
          kerabaMargin,
          roofIndex: roof.index,
          trestle: {
            length: lengthBase,
            hajebichi: hajebichi,
            ...selectedRaftBase,
            ...selectedTrestle,
            ...selectedConstMthd,
            ...selectedRoofBase,
          },
          construction: {
            ...constructionList.find((data) => data.constTp === trestleState.constTp),
            cvrYn,
            snowGdPossYn,
            cvrChecked,
            snowGdChecked,
            setupCover: cvrChecked ?? false,
            setupSnowCover: snowGdChecked ?? false,
          },
          trestleDetail: trestleDetail,
        }
      }
      return roof
    })

    let result = true
    for (let i = 0; i < newAddedRoofs.length; i++) {
      const roof = newAddedRoofs[i]

      if (!roof.trestle?.trestleMkrCd) {
        Swal.fire({
          title: getMessage('modal.module.basic.settting.module.error1', [roof.nameJp]), // 가대메이커를 선택해주세요.
          icon: 'warning',
        })
        result = false
        return false
      }

      if (!roof.trestle?.constMthdCd) {
        Swal.fire({
          title: getMessage('modal.module.basic.settting.module.error2', [roof.nameJp]), // 공법을 선택해주세요.
          icon: 'warning',
        })
        result = false
        return false
      }
      if (!roof.trestle?.roofBaseCd) {
        Swal.fire({
          title: getMessage('modal.module.basic.settting.module.error3', [roof.nameJp]), // 지붕밑바탕탕을 선택해주세요.
          icon: 'warning',
        })
        result = false
        return false
      }
      if (!roof.construction?.constTp) {
        Swal.fire({
          title: getMessage('modal.module.basic.settting.module.error4', [roof.nameJp]), // 시공법법을 선택해주세요.
          icon: 'warning',
        })
        result = false
        return false
      }

      if (roof.lenAuth === 'C') {
        if (!roof.trestle?.length) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error5', [roof.nameJp]), // L 값을 입력해주세요.
            icon: 'warning',
          })
          result = false
          return false
        }
      }
      if (['C', 'R'].includes(roof.raftAuth)) {
        if (!roof?.raftBaseCd) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error6', [roof.nameJp]), // 서까래 간격을 입력해주세요.
            icon: 'warning',
          })
          result = false
          return false
        }
      }

      if (['C', 'R'].includes(roof.roofPchAuth)) {
        if (!roof?.roofPchBase) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error7', [roof.nameJp]), // 하제비치를 입력해주세요.
            icon: 'warning',
          })
          result = false
          return false
        }
      }

      if (!roof?.eavesMargin || !roof?.ridgeMargin || !roof?.kerabaMargin) {
        Swal.fire({
          title: getMessage('modal.module.basic.settting.module.error8', [roof.nameJp]), // 모듈 배치 영영 값을 입력해주세요.
          icon: 'warning',
        })
        result = false
        return false
      }

      if (roof.trestle.trestleMkrCd !== 'NO_DATA') {
        // 가매 없음이 아닐때는 가대 정보보다 작을 수 없음
        if (roof.trestleDetail?.eaveIntvl > roof.eavesMargin) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error9', [roof.trestleDetail?.eaveIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
            icon: 'warning',
          })
          result = false
          return false
        }

        if (roof.trestleDetail?.ridgeIntvl > roof.ridgeMargin) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error10', [roof.trestleDetail?.ridgeIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
            icon: 'warning',
          })
          result = false
          return false
        }

        if (roof.trestleDetail?.kerabaIntvl > roof.kerabaMargin) {
          Swal.fire({
            title: getMessage('modal.module.basic.settting.module.error11', [roof.trestleDetail?.kerabaIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
            icon: 'warning',
          })
          result = false
          return false
        }
      }
    }

    if (result) {
      const newRoofs = newAddedRoofs.map((roof) => {
        const { addRoof, construction, trestle, trestleDetail, roofConstructions, ...rest } = roof
        return rest
      })

      setModuleSelectionData({
        ...moduleSelectionData,
        roofConstructions: newAddedRoofs.map((roof, index) => ({
          roofIndex: newRoofs[index].index,
          trestle: roof.trestle,
          addRoof: newRoofs[index],
          construction: roof.construction,
          trestleDetail: roof.trestleDetail,
        })),
      })
      setFlag(true)
      tempModuleSelectionData.current = {
        ...moduleSelectionData,
        roofConstructions: newAddedRoofs.map((roof, index) => ({
          roofIndex: newRoofs[index].index,
          trestle: roof.trestle,
          addRoof: newRoofs[index],
          construction: roof.construction,
          trestleDetail: roof.trestleDetail,
        })),
      }
      const updatePromises = [
        // new Promise((resolve) => {
        //   resolve()
        // }),
        new Promise((resolve) => {
          setRoofs(newRoofs)
          resolve()
        }),

        new Promise((resolve) => {
          const roofConstructions = newAddedRoofs.map((roof, index) => ({
            roofIndex: newRoofs[index].index,
            addRoof: newRoofs[index],
            trestle: {
              ...roof.trestle,
              raftBaseCd: roof.raftBaseCd,
            },
            construction: {
              // ...constructionList.find((construction) => newAddedRoofs[index].construction.constTp === construction.constTp),
              ...roof.construction,
              roofIndex: roof.index,
              selectedIndex: roof.index,
            },
            trestleDetail: roof.trestleDetail,
          }))
          trestleTrigger({
            roofConstructions,
          })
          setRoofsStore(roofConstructions)
          resolve()
        }),
      ]

      await Promise.all(updatePromises)
      return true
    }

    return false
  }

  const onMarginCheck = (target, data) => {}

  useImperativeHandle(ref, () => ({
    isComplete,
  }))

  return (
    <div className="roof-module-tab2-overflow">
      <div className="module-table-box mb10">
        <div className="module-box-tab">
          {roofs &&
            roofs.map((roof, index) => (
              <button
                key={index}
                className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
                onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
              >
                {roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
              </button>
            ))}
        </div>
        <div className="module-table-inner">
          <div className="module-table-flex-wrap tab2">
            <div className="module-flex-item">
              <div className="eaves-keraba-table">
                {selectedRoof && selectedRoof.lenAuth === 'C' && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">L</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          <input
                            type="text"
                            className="input-origin block"
                            value={lengthBase}
                            onChange={(e) => setLengthBase(e.target.value)}
                            disabled={selectedRoof.lenAuth === 'R'}
                          />
                        </div>
                      </div>
                    </div>
                  </>
                )}
                {selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          {raftBaseList.length > 0 && (
                            <QSelectBox
                              options={raftBaseList}
                              value={selectedRaftBase}
                              sourceKey={'clCode'}
                              targetKey={'clCode'}
                              showKey={'clCodeNm'}
                              disabled={selectedRoof.raftAuth === 'R'}
                              onChange={(e) => onChangeRaftBase(e)}
                            />
                          )}
                        </div>
                      </div>
                    </div>
                  </>
                )}
                {selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          <input
                            type="text"
                            className="input-origin block"
                            disabled={selectedRoof.roofPchAuth === 'R'}
                            onChange={(e) => setHajebichi(e.target.value)}
                            value={hajebichi}
                          />
                        </div>
                      </div>
                    </div>
                  </>
                )}
                <div className="eaves-keraba-item">
                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
                  <div className="eaves-keraba-td">
                    <div className="grid-select">
                      {trestleList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={trestleList}
                          value={selectedTrestle}
                          sourceKey={'trestleMkrCd'}
                          targetKey={'trestleMkrCd'}
                          showKey={'trestleMkrCdJp'}
                          onChange={(e) => onChangeTrestleMaker(e)}
                        />
                      )}
                    </div>
                  </div>
                </div>
                <div className="eaves-keraba-item">
                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
                  <div className="eaves-keraba-td">
                    <div className="grid-select">
                      {constMthdList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={constMthdList}
                          value={selectedConstMthd}
                          sourceKey={'constMthdCd'}
                          targetKey={'constMthdCd'}
                          showKey={'constMthdCdJp'}
                          onChange={(e) => onChangeConstMthd(e)}
                        />
                      )}
                    </div>
                  </div>
                </div>
                <div className="eaves-keraba-item">
                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
                  <div className="eaves-keraba-td">
                    <div className="grid-select">
                      {roofBaseList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={roofBaseList}
                          sourceKey={'roofBaseCd'}
                          targetKey={'roofBaseCd'}
                          showKey={'roofBaseCdJp'}
                          value={selectedRoofBase}
                          onChange={(e) => onChangeRoofBase(e)}
                        />
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="module-flex-item non-flex">
              <div className="flex-item-btn-wrap">
                <button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
                  {getMessage('modal.module.basic.setting.module.standard.construction')}(I)
                </button>
                <button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
                  {getMessage('modal.module.basic.setting.module.multiple.construction')}
                </button>
                <button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
                  {getMessage('modal.module.basic.setting.module.standard.construction')}
                </button>
                <button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
                  {getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
                </button>
                <button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
                  {getMessage('modal.module.basic.setting.module.enforce.construction')}
                </button>
              </div>
              <div className="grid-check-form-flex">
                <div className="d-check-box pop">
                  <input
                    type="checkbox"
                    id={`ch01`}
                    disabled={!cvrYn || cvrYn === 'N'}
                    checked={cvrChecked || false}
                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
                    onChange={() => setCvrChecked(!cvrChecked)}
                  />
                  <label htmlFor={`ch01`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
                </div>
                <div className="d-check-box pop">
                  <input
                    type="checkbox"
                    id={`ch02`}
                    disabled={!snowGdPossYn || snowGdPossYn === 'N'}
                    checked={snowGdChecked || false}
                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
                    onChange={() => setSnowGdChecked(!snowGdChecked)}
                  />
                  <label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
                </div>
              </div>
            </div>
          </div>

          <div className="module-input-area">
            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
            <div className="module-input-wrap">
              <div className="outline-form mr15">
                <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
                <div className="input-grid mr10">
                  <input
                    type="number"
                    className="input-origin block"
                    value={eavesMargin ?? 0}
                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
                    onChange={(e) => setEavesMargin(+e.target.value)}
                  />
                </div>
                <span className="thin">mm</span>
              </div>
              <div className="outline-form mr15">
                <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
                <div className="input-grid mr10">
                  <input
                    type="number"
                    className="input-origin block"
                    value={ridgeMargin ?? 0}
                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
                    onChange={(e) => setRidgeMargin(+e.target.value)}
                  />
                </div>
                <span className="thin">mm</span>
              </div>
              <div className="outline-form ">
                <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
                <div className="input-grid mr10">
                  <input
                    type="number"
                    className="input-origin block"
                    value={kerabaMargin ?? 0}
                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
                    onChange={(e) => setKerabaMargin(+e.target.value)}
                  />
                </div>
                <span className="thin">mm</span>
              </div>
            </div>
          </div>
          <div className="module-input-area">
            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.margin')}</div>
            <div className="module-input-wrap">
              <div className="outline-form">
                <span>{getMessage('modal.module.basic.setting.module.placement.margin.horizontal')}</span>
                <div className="input-grid mr10">
                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlHor} readOnly />
                </div>
                <span className="thin">mm</span>
              </div>
              <div className="outline-form">
                <span>{getMessage('modal.module.basic.setting.module.placement.margin.vertical')}</span>
                <div className="input-grid mr10">
                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlVer} readOnly />
                </div>
                <span className="thin">mm</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="module-bottom">
        <div className="module-table-box ">
          <div className="warning-guide">
            <div className="warning">
              {getMessage('modal.module.basic.setting.module.setting.info1')}
              <br />
              {getMessage('modal.module.basic.setting.module.setting.info2')}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
})

export default Trestle