import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'

export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)

  const flowLineProps = {
    FLOW_LINE_REF,
  }
  const updownProps = {
    UP_DOWN_REF,
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap r`}>
        <div className="modal-head modal-handle">
          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="modal-btn-wrap">
            {buttonType.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">
            {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
            {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={handleSave}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
        <div className="modal-foot modal-handle"></div>
      </div>
    </WithDraggable>
  )
}