import WithDraggable from '@/components/common/draggable/WithDraggable'
import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
import { useMessage } from '@/hooks/useMessage'
import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
import { usePopup } from '@/hooks/usePopup'

export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
    useRoofShapePassivitySetting(id)
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()

  const eavesProps = {
    offsetRef,
    pitchRef,
    pitchText,
  }

  const gableProps = {
    offsetRef,
    pitchRef,
    pitchText,
  }

  const shedProps = {
    offsetRef,
  }

  return (
    <WithDraggable isShow={true} pos={pos} className="xxm">
      <WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="modal-btn-wrap">
          {buttons.map((button) => (
            <button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
              {button.name}
            </button>
          ))}
        </div>
        <div className="modal-bottom-border-bx">
          <div className="setting-tit">{getMessage('setting')}</div>
          <div className="discrimination-box">
            {type === TYPES.EAVES && <Eaves {...eavesProps} />}
            {type === TYPES.GABLE && <Gable {...gableProps} />}
            {type === TYPES.SHED && <Shed {...shedProps} />}
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame sub-tab mr5" onClick={handleRollback}>
              {getMessage('common.setting.rollback')}
            </button>
            <button className="btn-frame sub-tab act" onClick={handleConfirm}>
              {getMessage('apply')}
            </button>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal act" onClick={() => handleSave(id)}>
            {getMessage('common.setting.finish')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}
