import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'

export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModal }) {
  const { getMessage } = useMessage()
  const {
    type,
    setType,
    buttonMenu,
    currentWallLineRef,
    TYPES,
    radioTypeRef,
    arrow1Ref,
    arrow2Ref,
    length1Ref,
    length2Ref,
    handleSave,
    wallLineEditRef,
  } = useWallLineOffsetSetting(setShowWallLineOffsetSettingModal)

  const wallLineProps = {
    length1Ref,
    length2Ref,
    arrow1Ref,
    arrow2Ref,
    radioTypeRef,
    currentWallLineRef,
  }

  const offsetProps = {
    length1Ref,
    arrow1Ref,
    currentWallLineRef,
  }

  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
          <button className="modal-close" onClick={() => setShowWallLineOffsetSettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="modal-btn-wrap">
            {buttonMenu.map((item) => (
              <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
                {item.name}
              </button>
            ))}
          </div>
          <div className="properties-setting-wrap outer">
            <div className="setting-tit">{getMessage('setting')}</div>
            {type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
            {type === TYPES.OFFSET && <Offset {...offsetProps} />}
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={handleSave}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}