import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
import { usePopup } from '@/hooks/usePopup'
import { useSwal } from '@/hooks/useSwal'
import Image from 'next/image'

export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const { swalFire } = useSwal()
  const [buttonAct, setButtonAct] = useState(1)
  const [useCalcPad, setUseCalcPad] = useState(false)
  const types = [
    { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
    { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE },
    { id: 3, name: getMessage('double.pitch'), type: OUTER_LINE_TYPE.DOUBLE_PITCH },
    { id: 4, name: getMessage('angle'), type: OUTER_LINE_TYPE.ANGLE },
    { id: 5, name: getMessage('diagonal'), type: OUTER_LINE_TYPE.DIAGONAL_LINE },
  ]
  const {
    length1,
    setLength1,
    length2,
    setLength2,
    length1Ref,
    length2Ref,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
    angle1,
    setAngle1,
    angle1Ref,
    angle2,
    setAngle2,
    angle2Ref,
    type,
    setType,
    arrow1Ref,
    arrow2Ref,
    outerLineDiagonalLength,
    setOuterLineDiagonalLength,
    outerLineDiagonalLengthRef,
    handleRollback,
    handleFix,
  } = usePlacementShapeDrawing(id)

  const disableKeypad = !useCalcPad

  const outerLineProps = {
    length1,
    setLength1,
    length1Ref,
    arrow1,
    setArrow1,
    disableKeypad,
  }

  const rightAngleProps = {
    length1,
    setLength1,
    length1Ref,
    length2,
    setLength2,
    length2Ref,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
    disableKeypad,
  }

  const doublePitchProps = {
    angle1,
    setAngle1,
    angle1Ref,
    angle2,
    setAngle2,
    angle2Ref,
    length1,
    setLength1,
    length1Ref,
    length2,
    setLength2,
    length2Ref,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
    arrow1Ref,
    arrow2Ref,
    disableKeypad,
  }

  const angleProps = {
    angle1,
    setAngle1,
    angle1Ref,
    length1,
    setLength1,
    length1Ref,
    disableKeypad,
  }

  const diagonalLineProps = {
    length1,
    setLength1,
    length1Ref,
    length2,
    setLength2,
    length2Ref,
    diagonalLength: outerLineDiagonalLength,
    setDiagonalLength: setOuterLineDiagonalLength,
    diagonalLengthRef: outerLineDiagonalLengthRef,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
    disableKeypad,
  }

  const onClickButton = (button) => {
    setButtonAct(button.id)
    setType(button.type)
  }
  return (
    <WithDraggable isShow={true} pos={pos} className="r">
      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="modal-btn-wrap">
          {types.map((type, idx) => (
            <button key={`placement-${idx}`} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
              {type.name}
            </button>
          ))}
        </div>
        <div className="properties-setting-wrap outer">
          {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
          {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
          {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
          {buttonAct === 4 && <Angle props={angleProps} />}
          {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
        </div>

        <div className="grid-btn-wrap">
          <button className="mr5" style={{ verticalAlign: 'middle' }} onClick={() => setUseCalcPad((prev) => !prev)}>
            <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
          </button>
          <button className="btn-frame modal mr5" onClick={handleRollback}>
            {getMessage('modal.cover.outline.rollback')}
          </button>
          <button
            className="btn-frame modal act"
            onClick={() => {
              swalFire({
                type: 'confirm',
                text: getMessage('modal.cover.outline.fix.confirm'),
                confirmFn: handleFix,
              })
            }}
          >
            {getMessage('modal.placement.surface.drawing.fix')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}