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

export const BuildingGeometry: React.FC = () => {
    const { buildingGeometry, setGeometry } = useCalculatorStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const val = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
        setGeometry({ [e.target.name]: val });
    };

    return (
        <div className="card">
            <div className="card-header">Building Geometry</div>
            <div className="flex-col gap-sm">
                <div className="input-group">
                    <label className="input-label">Roof angle (&theta;):</label>
                    <div className="flex-row gap-sm items-center">
                        <input type="text" name="roofSlope" className="input-field" value={buildingGeometry.roofSlope} onChange={handleChange} style={{ width: '80px' }} />
                        <span className="text-muted">0.4 deg</span> {/* Placeholder for calc */}
                    </div>
                </div>
                <div className="input-group">
                    <label className="input-label">Building length:</label>
                    <input type="number" name="buildingLength" className="input-field" value={buildingGeometry.buildingLength} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
                <div className="input-group">
                    <label className="input-label">Least width:</label>
                    <input type="number" name="leastWidth" className="input-field" value={buildingGeometry.leastWidth} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
                <div className="input-group">
                    <label className="input-label">Mean Roof Ht (h):</label>
                    <input type="number" name="meanRoofHeight" className="input-field" value={buildingGeometry.meanRoofHeight} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
                <div className="input-group">
                    <label className="input-label">Parapet ht above grd:</label>
                    <input type="number" name="parapetHeight" className="input-field" value={buildingGeometry.parapetHeight} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
                <div className="input-group">
                    <label className="input-label">Minimum parapet ht:</label>
                    <input type="number" name="minimumParapetHeight" className="input-field" value={buildingGeometry.minimumParapetHeight} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
                <div className="input-group">
                    <label className="input-label">hb for Elevated bldg:</label>
                    <input type="number" name="hb" className="input-field" value={buildingGeometry.hb} onChange={handleChange} />
                    <span className="input-unit">ft</span>
                </div>
            </div>
        </div>
    );
};