import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilState } from 'recoil'
import { useRef } from 'react'
import { usePopup } from '@/hooks/usePopup'
import { CalculatorInput } from '@/components/common/input/CalcInput'

export default function Slope({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [globalPitch, setGlobalPitch] = useRecoilState(pitchSelector)
  const pitchText = useRecoilState(pitchTextSelector)
  const inputRef = useRef()

  return (
    <WithDraggable isShow={true} pos={pos} className="xxxm">
      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="slope-wrap">
          <div className="outline-form">
            <span className="mr10" style={{ width: 'auto' }}>
              {getMessage('slope')}
            </span>
            <div className="input-grid mr5">
              {/*<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />*/}
              <CalculatorInput
                id=""
                name=""
                label=""
                className="input-origin block"
                ref={inputRef}
                value={globalPitch}
                options={{
                  allowNegative: false,
                  allowDecimal: true //(index !== 0),
                }}
              ></CalculatorInput>
            </div>
            <span className="thin">{pitchText}</span>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button
            className="btn-frame modal act"
            onClick={() => {
              setGlobalPitch(inputRef.current.value)
              closePopup(id)
            }}
          >
            {getMessage('modal.common.save')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}