import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import {
  checkedModuleState,
  isManualModuleLayoutSetupState,
  isManualModuleSetupState,
  moduleRowColArrayState,
  moduleSetupOptionState,
  toggleManualSetupModeState,
} from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'

const Placement = forwardRef((props, refs) => {
  const { getMessage } = useMessage()
  const [useTab, setUseTab] = useState(true)

  const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)

  const [selectedItems, setSelectedItems] = useState({})
  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)

  const setCheckedModules = useSetRecoilState(checkedModuleState)
  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
  const { makeModuleInitArea, roofOutlineColor } = useModuleBasicSetting(3)

  const [isMultiModule, setIsMultiModule] = useState(false)

  //언마운트시 버튼 초기화
  const setIsManualModuleSetup = useSetRecoilState(isManualModuleSetupState)
  const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
  const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)

  const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
  const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)

  const [colspan, setColspan] = useState(1)
  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)

  //모듈 배치면 생성
  useEffect(() => {
    if (moduleSelectionData) {
      //1개라도 치도리 불가가 있으면 치도리 불가
      const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
      if (isChidroriValue) {
        setIsChidoriNotAble(true)
      }
      makeModuleInitArea(moduleSelectionData)
    }

    if (moduleSelectionData.module.itemList.length > 1) {
      setColspan(2)
    }

    return () => {
      // refs.isChidori.current = 'false'
      // refs.setupLocation.current = 'eaves'
      setIsManualModuleSetup(false)
      setIsManualModuleLayoutSetup(false)
      setManualSetupMode('off')
      resetModuleSetupOption()
    }
  }, [])

  // useEffect(() => {
  //   console.log('moduleRowColArray', moduleRowColArray)
  // }, [moduleRowColArray])

  //최초 지입시 체크
  useEffect(() => {
    if (isObjectNotEmpty(moduleSelectionData)) {
      //두번째 선택한 데이터가를 기반으로 세번째 선택을 체크한다
      if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) {
        let initCheckedModule = {}
        moduleSelectionData.module.itemList.forEach((obj, index) => {
          if (index === 0) {
            initCheckedModule = { [obj.itemId]: true }
          } else {
            initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
          }
        })

        setSelectedItems(initCheckedModule)
        setSelectedModules(moduleSelectionData.module)
        props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0, checked: true })))
      }

      //모듈 배치면 생성
      if (isObjectNotEmpty(moduleSelectionData.module) && moduleSelectionData.module.itemList.length > 1) {
        setIsMultiModule(true)
      }
    }
  }, [moduleSelectionData])

  //체크된 모듈 데이터
  useEffect(() => {
    if (isObjectNotEmpty(selectedItems) && isObjectNotEmpty(selectedModules)) {
      const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
      const moduleArray = selectedModules.itemList.filter((item) => {
        return checkedModuleIds.includes(item.itemId)
      })
      setCheckedModules(moduleArray)
    }
  }, [selectedItems, selectedModules])

  const moduleData = {
    header: [
      { type: 'check', name: '', prop: 'check', width: 70 },
      { type: 'color-box', name: getMessage('module'), prop: 'module' },
      { type: 'text', name: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
      { type: 'text', name: `段数`, prop: 'rows', width: 60 },
      { type: 'text', name: `列数`, prop: 'cols', width: 60 },
    ],
    rows: [],
  }

  const handleChangeChidori = (e) => {
    const bool = e.target.value === 'true' ? true : false
    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })

    //변경하면 수동 다 꺼짐
    setIsManualModuleSetup(false)
    setIsManualModuleLayoutSetup(false)
    setManualSetupMode('off')
  }

  const handleSetupLocation = (e) => {
    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })

    //변경하면 수동 다 꺼짐
    setIsManualModuleSetup(false)
    setIsManualModuleLayoutSetup(false)
    setManualSetupMode('off')
  }

  //체크된 모듈 아이디 추출
  const handleSelectedItem = (e, itemId) => {
    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })

    const newLayoutSetup = [...props.layoutSetup]
    props.layoutSetup.forEach((item, index) => {
      if (item.moduleId === itemId) {
        newLayoutSetup[index] = { ...props.layoutSetup[index], checked: e.target.checked }
      }
    })
    props.setLayoutSetup(newLayoutSetup)
  }

  const handleLayoutSetup = (e, itemId, index) => {
    const newLayoutSetup = [...props.layoutSetup]
    newLayoutSetup[index] = {
      ...newLayoutSetup[index],
      moduleId: itemId,
      [e.target.name]: Number(e.target.value),
    }
    props.setLayoutSetup(newLayoutSetup)
  }

  return (
    <>
      <div className="module-table-flex-wrap">
        <div className="module-table-box">
          <div className="module-table-inner">
            <div className="roof-module-table">
              <table>
                <thead>
                  {moduleData.header.map((data) => (
                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
                      {data.type === 'check' ? (
                        <div className="d-check-box no-text pop">
                          <input type="checkbox" id="ch01" disabled />
                          <label htmlFor="ch01"></label>
                        </div>
                      ) : (
                        data.name
                      )}
                    </th>
                  ))}
                </thead>
                <tbody>
                  {selectedModules.itemList &&
                    selectedModules.itemList.map((item, index) => (
                      <tr key={index}>
                        <td className="al-c">
                          <div className="d-check-box no-text pop">
                            <input
                              type="checkbox"
                              id={item.itemId}
                              name={item.itemId}
                              checked={selectedItems[item.itemId]}
                              onChange={(e) => handleSelectedItem(e, item.itemId)}
                            />
                            <label htmlFor={item.itemId}></label>
                          </div>
                        </td>
                        <td>
                          <div className="color-wrap">
                            <span className="color-box" style={{ backgroundColor: item.color }}></span>
                            <span className="name">{item.itemNm}</span>
                          </div>
                        </td>
                        <td className="al-c">
                          <div className="color-wrap">
                            <span className="name">{item.mixAsgYn}</span>
                          </div>
                        </td>
                        <td className="al-r">
                          <div className="input-grid">
                            <input
                              type="text"
                              className="input-origin block"
                              name="row"
                              value={props.layoutSetup[index]?.row ?? 1}
                              defaultValue={0}
                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
                            />
                          </div>
                        </td>
                        <td className="al-r">
                          <div className="input-grid">
                            <input
                              type="text"
                              className="input-origin block"
                              name="col"
                              value={props.layoutSetup[index]?.col ?? 1}
                              defaultValue={0}
                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
                            />
                          </div>
                        </td>
                      </tr>
                    ))}
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div className="module-table-box non-flex">
          <div className="module-table-inner">
            <div className="roof-module-table">
              <table>
                <thead>
                  <tr>
                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div className="hexagonal-radio-wrap">
                        <div className="d-check-radio pop mb10">
                          <input
                            type="radio"
                            name="radio02"
                            id="ra03"
                            checked={moduleSetupOption.isChidori}
                            disabled={isChidoriNotAble}
                            value={'true'}
                            onChange={(e) => handleChangeChidori(e)}
                          />
                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
                        </div>
                        <div className="d-check-radio pop">
                          <input
                            type="radio"
                            name="radio02"
                            id="ra04"
                            checked={!moduleSetupOption.isChidori}
                            value={'false'}
                            onChange={(e) => handleChangeChidori(e)}
                          />
                          <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div className="hexagonal-radio-wrap">
                        <div className="d-check-radio pop mb10">
                          <input
                            type="radio"
                            name="radio03"
                            id="ra05"
                            checked={moduleSetupOption.setupLocation === 'eaves'}
                            value={'eaves'}
                            onChange={handleSetupLocation}
                          />
                          <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
                        </div>
                        <div className="d-check-radio pop">
                          <input
                            type="radio"
                            name="radio03"
                            id="ra06"
                            checked={moduleSetupOption.setupLocation === 'ridge'}
                            value={'ridge'}
                            onChange={handleSetupLocation}
                            disabled={isMultiModule}
                          />
                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div className="hide-check-guide">
        {getMessage('modal.module.basic.setting.module.placement.max.size.check')}
        <button className={`arr ${!useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
      </div>
      <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
        <div className="module-table-inner">
          <div className="roof-module-table">
            <table className="">
              <thead>
                <tr>
                  <th rowSpan={2} style={{ width: '22%' }}></th>
                  {selectedModules &&
                    selectedModules.itemList.map((item) => (
                      <th colSpan={colspan}>
                        <div className="color-wrap">
                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
                          <span className="name">{item.itemNm}</span>
                        </div>
                      </th>
                    ))}
                </tr>
                <tr>
                  {selectedModules.itemList.map((item) => (
                    <>
                      <th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
                      {colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
                    </>
                  ))}
                </tr>
              </thead>
              <tbody>
                {moduleSelectionData.roofConstructions.map((item, index) => (
                  <tr>
                    <td>
                      <div className="color-wrap">
                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof?.index) }}></span>
                        <span className="name">{item.addRoof?.roofMatlNmJp}</span>
                      </div>
                    </td>
                    {moduleRowColArray[index]?.map((item) => (
                      <>
                        <td className="al-c">{item.moduleMaxRows}</td>
                        {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>}
                      </>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  )
})

export default Placement