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'
import { usePopup } from '@/hooks/usePopup'

export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
  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,
    pitchText,
    shedPitch,
    setShedPitch,
  } = useRoofShapeSetting(id)
  const { closePopup } = usePopup()

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

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

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap lr mount`}>
        <div className="modal-head modal-handle">
          <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </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">
            {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(id)}>
              {getMessage('common.setting.finish')}
            </button>
          </div>
        </div>
        <div className="modal-foot modal-handle"></div>
      </div>
    </WithDraggable>
  )
}