import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
import { selectedRoofMaterialSelector } from '@/store/settingAtom'
import { useEffect } from 'react'

export default function Eaves({ offsetRef, pitchRef, pitchText }) {
  const { getMessage } = useMessage()
  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)

  return (
    <>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '63px' }}>
          {getMessage('slope')}
        </span>
        <div className="input-grid mr5">
          <input
            type="text"
            className="input-origin block"
            defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
            ref={pitchRef}
          />
        </div>
        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '63px' }}>
          {getMessage('eaves.offset')}
        </span>
        <div className="input-grid mr5">
          <input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
        </div>
        <span className="thin">mm</span>
      </div>
    </>
  )
}