import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { currentAngleTypeSelector } from '@/store/canvasAtom'
import { CalculatorInput } from '@/components/common/input/CalcInput'

export default function Gable({ offsetRef, disableKeypad }) {
  const { getMessage } = useMessage()
  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  return (
    <>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '63px' }}>
          {getMessage('gable.offset')}
        </span>
        <div className="input-grid mr5">
          {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
          <CalculatorInput
            id=""
            name=""
            label=""
            className="input-origin block"
            value={offsetRef.current?.value ?? 300}  // Set default value to 500
            ref={offsetRef}
            onChange={() => {}}
            disableKeypad={disableKeypad}
            options={{
              allowNegative: false,
              allowDecimal: false
            }}
          />
        </div>
        <span className="thin">mm</span>
      </div>
    </>
  )
}