import React from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateRoofSnow } from '../../../utils/snowLogic';

export const SnowSheet: React.FC = () => {
    const { snow, setSnow } = useCalculatorStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSnow({ [e.target.name]: parseFloat(e.target.value) });
    };

    const pf = calculateRoofSnow(snow.groundLoad, snow.exposureFactor, snow.thermalFactor, snow.importanceFactor);

    return (
        <div className="sheet-content">
            <h2>Snow Loads (ASCE 7)</h2>
            <div className="calculator-grid">
                <div className="card">
                    <div className="card-header">Input Parameters</div>
                    <div className="flex-col gap-sm">
                        <div className="input-group">
                            <label className="input-label">Ground Snow Load (pg):</label>
                            <input type="number" name="groundLoad" className="input-field" value={snow.groundLoad} onChange={handleChange} />
                            <span className="input-unit">psf</span>
                        </div>
                        <div className="input-group">
                            <label className="input-label">Import. Factor (Is):</label>
                            <input type="number" step="0.01" name="importanceFactor" className="input-field" value={snow.importanceFactor} onChange={handleChange} />
                        </div>
                        <div className="input-group">
                            <label className="input-label">Exposure Factor (Ce):</label>
                            <input type="number" step="0.01" name="exposureFactor" className="input-field" value={snow.exposureFactor} onChange={handleChange} />
                        </div>
                        <div className="input-group">
                            <label className="input-label">Thermal Factor (Ct):</label>
                            <input type="number" step="0.01" name="thermalFactor" className="input-field" value={snow.thermalFactor} onChange={handleChange} />
                        </div>
                    </div>
                </div>

                <div className="card">
                    <div className="card-header">Calculated Loads</div>
                    <div className="report-item">
                        <span className="report-label">Flat Roof Snow Load (Pf):</span>
                        <span className="report-value">{pf.toFixed(2)} psf</span>
                    </div>
                </div>
            </div>
        </div>
    );
};