import { useWindStore } from '../../store/windStore';
import { ExposureCategory, RiskCategory } from '../../types';
import { InputGroup } from './InputGroup';

export const WindParametersInput = () => {
    const { inputs, setParameters } = useWindStore();
    const { parameters } = inputs;

    const exposureCategories: { value: ExposureCategory; label: string }[] = [
        { value: 'B', label: 'B - Urban/Suburban' },
        { value: 'C', label: 'C - Open Terrain' },
        { value: 'D', label: 'D - Water Surfaces' },
    ];

    const riskCategories: { value: RiskCategory; label: string }[] = [
        { value: 'I', label: 'I - Low Risk' },
        { value: 'II', label: 'II - Standard' },
        { value: 'III', label: 'III - Substantial' },
        { value: 'IV', label: 'IV - Essential' },
    ];

    return (
        <>
            <div className="card">
                <div className="card-header">Exposure Category (ASCE 7 26.7.3)</div>
                <div className="flex-col gap-sm">
                    {exposureCategories.map((exp) => (
                        <label key={exp.value}>
                            <input
                                type="radio"
                                name="exposure"
                                checked={parameters.exposureCategory === exp.value}
                                onChange={() => setParameters({ exposureCategory: exp.value })}
                            />
                            {exp.label}
                        </label>
                    ))}
                </div>
            </div>

            <div className="card">
                <div className="card-header">Wind Speed (ASCE 7 Fig. 26.5-1A-C)</div>
                <InputGroup label="Basic Wind Speed V" unit="mph">
                    <input
                        type="number"
                        className="input-field"
                        value={parameters.basicWindSpeed}
                        onChange={(e) => setParameters({ basicWindSpeed: Number(e.target.value) })}
                    />
                </InputGroup>
                <InputGroup label="Topographic Factor Kzt">
                    <input
                        type="number"
                        className="input-field"
                        value={parameters.kzt}
                        step="0.01"
                        onChange={(e) => setParameters({ kzt: Number(e.target.value) })}
                    />
                </InputGroup>
                <InputGroup label="Ground Elevation Factor Ke">
                    <input
                        type="number"
                        className="input-field"
                        value={parameters.ke}
                        step="0.01"
                        onChange={(e) => setParameters({ ke: Number(e.target.value) })}
                    />
                </InputGroup>

            </div>

            <div className="card">
                <div className="card-header">Risk Category (ASCE 7 Table 1.5-1)</div>
                <div className="flex-col gap-sm">
                    {riskCategories.map((risk) => (
                        <label key={risk.value}>
                            <input
                                type="radio"
                                name="risk"
                                checked={parameters.riskCategory === risk.value}
                                onChange={() => setParameters({ riskCategory: risk.value })}
                            />
                            {risk.label}
                        </label>
                    ))}
                </div>
            </div>
        </>
    );
};