import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
import { usePopup } from '@/hooks/usePopup'

export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()

  const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText } = useEavesGableEdit(id)
  const eavesProps = {
    pitchRef,
    offsetRef,
    widthRef,
    radioTypeRef,
    pitchText,
  }

  const gableProps = {
    pitchRef,
    offsetRef,
    widthRef,
    radioTypeRef,
    pitchText,
  }

  const wallMergeProps = {
    offsetRef,
    radioTypeRef,
  }

  const shedProps = {
    offsetRef,
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </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.EAVES && <Eaves {...eavesProps} />}
            {type === TYPES.GABLE && <Gable {...gableProps} />}
            {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
            {type === TYPES.SHED && <Shed {...shedProps} />}
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}