import { useContext, useEffect } from 'react'
import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'

import { useMessage } from '@/hooks/useMessage'
import { useRefFiles } from '@/hooks/common/useRefFiles'
import { usePlan } from '@/hooks/usePlan'

import WithDraggable from '@/components/common/draggable/WithDraggable'

export default function ImgLoad() {
  const {
    refImage,
    queryRef,
    setRefImage,
    handleRefFile,
    refFileMethod,
    setRefFileMethod,
    handleRefFileMethod,
    mapPositionAddress,
    setMapPositionAddress,
    handleFileDelete,
    handleMapImageDown,
  } = useRefFiles()
  const { currentCanvasPlan } = usePlan()
  const { getMessage } = useMessage()
  const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)

  const handleModal = () => {
    setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
  }

  useEffect(() => {
    console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
    console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
  }, [floorPlanState.refFileModalOpen])

  useEffect(() => {
    const refFileMethod = currentCanvasPlan?.mapPositionAddress === null ? '1' : '2'
    setRefFileMethod(refFileMethod)
  }, [currentCanvasPlan])

  return (
    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} handle=".modal">
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('common.input.file')}</h1>
          {/* <button className="modal-close">닫기</button> */}
        </div>
        <div className="modal-body">
          <div className="img-flex-box">
            <span className="normal-font mr10">サイズ調整と回転</span>
            <label className="toggle-btn">
              <input
                type="checkbox"
                checked={floorPlanState.toggleRotate}
                onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
              />
              <span className="slider"></span>
            </label>
          </div>
          <div className="img-load-from">
            <div className="img-load-item">
              <div className="d-check-radio pop">
                <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
                <label htmlFor="ra06">ファイルを読み込む</label>
              </div>
              <div className="img-flex-box">
                <div className="img-edit-wrap">
                  <label className="img-edit-btn" htmlFor="img_file">
                    <span className="img-edit"></span>
                    ファイルの追加
                  </label>
                  <input
                    type="file"
                    id="img_file"
                    style={{ display: 'none' }}
                    onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
                  />
                </div>
                <div className="img-name-wrap">
                  {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
                  <button className="img-check"></button> */}
                  {currentCanvasPlan?.bgImageName === null ? (
                    <input type="text" className="input-origin al-l" value={refImage ? refImage.name : ''} readOnly />
                  ) : (
                    <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
                  )}
                  {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
                </div>
              </div>
            </div>
            <div className="img-load-item">
              <div className="d-check-radio pop">
                <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
                <label htmlFor="ra07">アドレスを読み込む</label>
              </div>
              <div className="img-flex-box for-address">
                <input
                  type="text"
                  ref={queryRef}
                  className="input-origin al-l mr10"
                  placeholder={'住所入力'}
                  value={mapPositionAddress}
                  onChange={(e) => setMapPositionAddress(e.target.value)}
                />
                <div className="img-edit-wrap">
                  <button className="img-edit-btn" onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}>
                    完了
                  </button>
                </div>
                {mapPositionAddress && <span className="check-address fail"></span>}
                {/* <span className="check-address success"></span> */}
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={handleModal}>
              完了
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}