'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/outerlinesetting/OuterLineWall'
import RightAngle from '@/components/floor-plan/modal/outerlinesetting/RightAngle'
import Angle from '@/components/floor-plan/modal/outerlinesetting/Angle'
import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePitch'
import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'

export default function WallLineSetting(props) {
  const { setShowOutlineModal } = props
  const { getMessage } = useMessage()
  const { type, setType, handleFix, handleRollback } = useOuterLineWall()

  return (
    <WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
      <div className={`modal-pop-wrap r mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
          <button className="modal-close" onClick={() => setShowOutlineModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-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
              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>
          {type === OUTER_LINE_TYPE.OUTER_LINE ? (
            <OuterLineWall />
          ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
            <RightAngle />
          ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
            <DoublePitch />
          ) : type === OUTER_LINE_TYPE.ANGLE ? (
            <Angle />
          ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
            <Diagonal />
          ) : (
            <></>
          )}
          <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}>
              {getMessage('modal.cover.outline.fix')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}