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

export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const [useCalcPad, setUseCalcPad] = useState(false)
  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 disableKeypad = !useCalcPad

  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }
  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText, disableKeypad }
  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,
    disableKeypad,
  }

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

  return (
    <WithDraggable isShow={true} pos={pos} className="lr">
      <WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.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="mr5" style={{ verticalAlign: 'middle' }} onClick={() => setUseCalcPad((prev) => !prev)}>
            <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
          </button>
          <button className="btn-frame modal act" onClick={() => handleSave(id)}>
            {getMessage('common.setting.finish')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}
