'use client'

import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import { v4 as uuidv4 } from 'uuid'

export default function WallLineSetting(props) {
  const { id } = props
  const { addPopup, closePopup } = usePopup()
  const { getMessage } = useMessage()
  const [propertiesId, setPropertiesId] = useState(uuidv4())
  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,
  } = useOuterLineWall(id, propertiesId)

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

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

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

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

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

  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
      <WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="modal-btn-wrap">
          {/*<button
              className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
              onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
            >
              {getMessage('modal.cover.outline')}
            </button>*/}

          {/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
              className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
              onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
            >
              {getMessage('modal.cover.outline.right.angle')}
            </button>
            <button
              className={`btn-frame modal ${type === OUTER_LINE_TYPE.DOUBLE_PITCH ? 'act' : ''}`}
              onClick={() => setType(OUTER_LINE_TYPE.DOUBLE_PITCH)}
            >
              {getMessage('modal.cover.outline2')}
            </button>
            <button className={`btn-frame modal ${type === OUTER_LINE_TYPE.ANGLE ? 'act' : ''}`} onClick={() => setType(OUTER_LINE_TYPE.ANGLE)}>
              {getMessage('modal.cover.outline.angle')}
            </button>
            <button
              className={`btn-frame modal ${type === OUTER_LINE_TYPE.DIAGONAL_LINE ? 'act' : ''}`}
              onClick={() => setType(OUTER_LINE_TYPE.DIAGONAL_LINE)}
            >
              {getMessage('modal.cover.outline.diagonal')}
            </button>*/}
        </div>
        <div className="properties-setting-wrap">
          {type === OUTER_LINE_TYPE.OUTER_LINE ? (
            <OuterLineWall props={outerLineProps} />
          ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
            <RightAngle props={rightAngleProps} />
          ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
            <DoublePitch props={doublePitchProps} />
          ) : type === OUTER_LINE_TYPE.ANGLE ? (
            <Angle props={angleProps} />
          ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
            <Diagonal props={diagonalLineProps} />
          ) : (
            <></>
          )}
        </div>
        <div className="normal-font mt10">{getMessage('outerLine.property.info')}</div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal mr5" onClick={handleRollback}>
            {getMessage('modal.cover.outline.rollback')}
          </button>
          <button
            className="btn-frame modal act"
            onClick={() => {
              handleFix()
              // closePopup(id)

              // setShowPropertiesSettingModal(true)
            }}
          >
            {getMessage('modal.cover.outline.fix')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}
