import WithDraggable from '@/components/common/draggable/WithDraggable'
import Ridge from '@/components/floor-plan/modal/roofShape/type/Ridge'
import Pattern from '@/components/floor-plan/modal/roofShape/type/Pattern'
import Side from '@/components/floor-plan/modal/roofShape/type/Side'
import Image from 'next/image'
import Direction from '@/components/floor-plan/modal/roofShape/type/Direction'
import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
import { useMessage } from '@/hooks/useMessage'

export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
  const { getMessage } = useMessage()
  const {
    shapeNum,
    setShapeNum,
    shapeMenu,
    handleSave,
    pitch,
    setPitch,
    eavesOffset,
    setEavesOffset,
    gableOffset,
    setGableOffset,
    sleeveOffset,
    setSleeveOffset,
    jerkinHeadWidth,
    setJerkinHeadWidth,
    jerkinHeadPitch,
    setJerkinHeadPitch,
    hipAndGableWidth,
    setHipAndGableWidth,
    shedWidth,
    setShedWidth,
    hasSleeve,
    setHasSleeve,
    buttonAct,
    setButtonAct,
    buttonMenu,
    handleConfirm,
    handleRollBack,
  } = useRoofShapeSetting(setShowRoofShapeSettingModal)

  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
  const sideProps = {
    pitch,
    setPitch,
    eavesOffset,
    setEavesOffset,
    gableOffset,
    setGableOffset,
    sleeveOffset,
    setSleeveOffset,
    jerkinHeadWidth,
    setJerkinHeadWidth,
    jerkinHeadPitch,
    setJerkinHeadPitch,
    hipAndGableWidth,
    setHipAndGableWidth,
    shedWidth,
    setShedWidth,
    hasSleeve,
    setHasSleeve,
    buttonAct,
    setButtonAct,
    buttonMenu,
    handleConfirm,
    handleRollBack,
  }

  const directionProps = {
    pitch,
    setPitch,
    eavesOffset,
    setEavesOffset,
    gableOffset,
    setGableOffset,
    shedWidth,
    setShedWidth,
  }

  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap lr mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
          <button className="modal-close" onClick={() => setShowRoofShapeSettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="roof-shape-menu">
            {shapeMenu.map((item) => (
              <button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
                <div className="shape-box">
                  <Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
                </div>
                <div className="shape-title">{item.name}</div>
              </button>
            ))}
          </div>
          <div className="properties-setting-wrap">
            <div className="setting-tit">{getMessage('setting')}</div>
            {shapeNum === 1 && <Ridge {...ridgeProps} />}
            {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
            {shapeNum === 4 && <Side {...sideProps} />}
            {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapeSettingModal)}>
              {getMessage('common.setting.finish')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}