import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useState } from 'react'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { gridColorState } from '@/store/gridAtom'
import { gridDisplaySelector } from '@/store/settingAtom'

const GRID_PADDING = 5
export default function GridCopy(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [length, setLength] = useState('0')
  const [arrow, setArrow] = useState(null)
  const currentObject = useRecoilValue(currentObjectState)
  const canvas = useRecoilValue(canvasState)
  const gridColor = useRecoilValue(gridColorState)
  const isGridDisplay = useRecoilValue(gridDisplaySelector)
  const handleApply = () => {
    copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
  }

  const copy = (object, length) => {
    const lineStartX = object.direction === 'vertical' ? object.x1 + length : object.x1
    const lineEndX = object.direction === 'vertical' ? object.x2 + length : object.x2
    const lineStartY = object.direction === 'vertical' ? object.y1 : object.y1 + length
    const lineEndY = object.direction === 'vertical' ? object.y2 : object.y1 + length

    const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
      stroke: gridColor,
      strokeWidth: 1,
      selectable: true,
      lockMovementX: true,
      lockMovementY: true,
      lockRotation: true,
      lockScalingX: true,
      lockScalingY: true,
      strokeDashArray: [5, 2],
      opacity: 0.3,
      padding: GRID_PADDING,
      direction: object.direction,
      visible: isGridDisplay,
      name: object.name,
    })

    canvas.add(line)
    canvas.setActiveObject(line)
    canvas.renderAll()
  }
  return (
    <WithDraggable isShow={true} pos={pos} className="xm">
      <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
        <div className="grid-option-wrap">
          <div className="grid-option-box">
            <div className="grid-input-form">
              <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
              <div className="input-grid mr5">
                <input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
              </div>
              <span>mm</span>
            </div>
            <div className="grid-direction">
              <button
                className={`direction up ${arrow === '↑' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
                onClick={() => {
                  if (currentObject?.direction === 'vertical') return
                  setArrow('↑')
                }}
              ></button>
              <button
                className={`direction down ${arrow === '↓' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
                onClick={() => {
                  if (currentObject?.direction === 'vertical') return
                  setArrow('↓')
                }}
              ></button>
              <button
                className={`direction left ${arrow === '←' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
                onClick={() => {
                  if (currentObject?.direction === 'horizontal') return
                  setArrow('←')
                }}
              ></button>
              <button
                className={`direction right ${arrow === '→' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
                onClick={() => {
                  if (currentObject?.direction === 'horizontal') return
                  setArrow('→')
                }}
              ></button>
            </div>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal act" onClick={handleApply}>
            {getMessage('modal.grid.copy.save')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}