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'
import { usePopup } from '@/hooks/usePopup'

export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const {
    type,
    setType,
    buttonMenu,
    currentWallLineRef,
    TYPES,
    radioTypeRef,
    arrow1Ref,
    arrow2Ref,
    length1Ref,
    length2Ref,
    handleSave,
    wallLineEditRef,
  } = useWallLineOffsetSetting(id)

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

  const offsetProps = {
    length1Ref,
    arrow1Ref,
    currentWallLineRef,
  }

  return (
    <WithDraggable isShow={true} pos={pos} className="r">
      <WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.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>
      </WithDraggable.Body>
    </WithDraggable>
  )
}