import { useState } from 'react'
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'

export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
  const { getMessage } = useMessage()
  const [buttonAct, setButtonAct] = useState(1)
  const buttons = [
    { id: 1, name: getMessage('eaves') },
    { id: 2, name: getMessage('gable') },
    { id: 3, name: getMessage('windage') },
  ]
  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
      <div className={`modal-pop-wrap xxm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
          <button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="modal-btn-wrap">
            {buttons.map((button) => (
              <button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
                {button.name}
              </button>
            ))}
          </div>
          <div className="modal-bottom-border-bx">
            <div className="setting-tit">{getMessage('setting')}</div>
            <div className="discrimination-box">
              {buttonAct === 1 && <Eaves />}
              {buttonAct === 2 && <Gable />}
              {buttonAct === 3 && <Shed />}
            </div>
            <div className="grid-btn-wrap">
              <button className="btn-frame sub-tab mr5">{getMessage('common.setting.rollback')}</button>
              <button className="btn-frame sub-tab act">{getMessage('apply')}</button>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act">{getMessage('common.setting.finish')}</button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}