import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Button, Input } from '@nextui-org/react'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
import { fabric } from 'fabric'
import { QPolygon } from '@/components/fabric/QPolygon'
import { modeState, objectPlacementModeState } from '@/store/canvasAtom'
import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'

const ObjectPlacement = ({ canvas }) => {
  const [open, setOpen] = useRecoilState(modalState)
  const [mode, setMode] = useRecoilState(modeState)
  const [objectPlacementMode, setObjectPlacementModeState] = useRecoilState(objectPlacementModeState)
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)
  const [areaBoundary, setAreaBoundary] = useState(true)

  // opening or shadow 개구 / 그림자
  const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)

  // free or dimension 프리 / 치수
  const [inputType, setInputType] = useState(INPUT_TYPE.FREE)

  const handleSave = () => {
    setMode(batchType)
    setOpen(false)
  }

  return (
    <div className="p-4 w-full max-w-xs border border-gray-300">
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">오브젝트 배치</label>
      </div>

      <div className="border-b mb-4">
        <h2 className="font-semibold">개구 · 그림자 배치</h2>
      </div>

      <div className="mb-4">
        <div className="flex">
          <Button
            className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.OPENING ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
            onClick={() => {
              setBatchType(BATCH_TYPE.OPENING)
              setObjectPlacementModeState({ ...objectPlacementMode, batchType: BATCH_TYPE.OPENING })
            }}
          >
            개구 배치
          </Button>
          <Button
            className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.SHADOW ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
            onClick={() => {
              setBatchType(BATCH_TYPE.SHADOW)
              setObjectPlacementModeState({ ...objectPlacementMode, batchType: BATCH_TYPE.SHADOW })
            }}
          >
            그림자 배치
          </Button>
        </div>
      </div>

      <div className="mb-4">
        <div className="mb-2 text-gray-700 font-semibold">설정</div>

        <div className="mb-2">
          <label className="inline-flex items-center">
            <Input
              type="radio"
              name="inputType"
              checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
              onClick={() => {
                setObjectPlacementModeState({ ...objectPlacementMode, inputType: INPUT_TYPE.FREE })
              }}
              className="form-radio text-blue-500"
            />
            <span className="ml-2">프리입력</span>
          </label>
        </div>

        <div className="mb-2">
          <label className="inline-flex items-center">
            <Input
              type="radio"
              name="inputType"
              checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
              onClick={() => {
                setObjectPlacementModeState({ ...objectPlacementMode, inputType: INPUT_TYPE.DIMENSION })
              }}
              className="form-radio text-blue-500"
            />
            <span className="ml-2">치수입력</span>
          </label>
        </div>

        <div className="flex mb-2">
          <div className="mr-2">
            <label className="block text-gray-700 text-sm mb-1">가로길이</label>
            <Input
              type="text"
              className="w-full px-3 py-2 border rounded"
              placeholder="mm"
              value={objectPlacementMode.width}
              onChange={(e) => {
                setObjectPlacementModeState({ ...objectPlacementMode, width: e.target.value })
              }}
            />
          </div>

          <div>
            <label className="block text-gray-700 text-sm mb-1">세로길이</label>
            <Input
              type="text"
              className="w-full px-3 py-2 border rounded"
              placeholder="mm"
              value={objectPlacementMode.height}
              onChange={(e) => {
                setObjectPlacementModeState({ ...objectPlacementMode, height: e.target.value })
              }}
            />
          </div>
        </div>

        <div className="mb-4">
          <label className="inline-flex items-center">
            <Input
              type="checkbox"
              name={`areaBoundary`}
              checked={objectPlacementMode.areaBoundary}
              onClick={() => setObjectPlacementModeState({ ...objectPlacementMode, areaBoundary: !objectPlacementMode.areaBoundary })}
              className="form-checkbox text-blue-500"
            />
            <span className="ml-2">영역교차</span>
          </label>
        </div>

        <div className="text-center">
          <Button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
            저장
          </Button>
        </div>
      </div>
    </div>
  )
}

export default ObjectPlacement