import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { usePropertiesSetting } from '@/hooks/roofcover/usePropertiesSetting'

export default function PropertiesSetting(props) {
  const { getMessage } = useMessage()
  const { setShowPropertiesSettingModal } = props

  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)

  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
      <div className={`modal-pop-wrap ssm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
          <button
            className="modal-close"
            onClick={() => {
              closeModal(setShowPropertiesSettingModal)
            }}
          >
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
          <div className="properties-setting-wrap">
            <div className="setting-tit">{getMessage('setting')}</div>
            <div className="setting-btn-wrap">
              <button className="setting-btn green mr5" onClick={handleSetEaves}>
                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
              </button>
              <button className="setting-btn blue" onClick={handleSetGable}>
                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
              </button>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal mr5" onClick={handleRollback}>
              {getMessage('modal.cover.outline.rollback')}
            </button>
            <button
              className="btn-frame modal act"
              onClick={() => {
                handleFix()
                setShowPropertiesSettingModal(false)
              }}
            >
              {getMessage('modal.cover.outline.finish')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}