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

export const CodeSelection: React.FC = () => {
    const { general, setGeneral } = useCalculatorStore();

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

    return (
        <div className="card">
            <div className="card-header">Code & Criteria</div>
            <div className="flex-col gap-sm">
                <div className="input-group">
                    <label className="input-label">Building Code:</label>
                    <select
                        name="code"
                        className="input-field-wide"
                        value={general.code}
                        onChange={handleChange}
                    >
                        <option value="IBC 2024">International Building Code 2024</option>
                        <option value="CBC 2022">California Building Code 2022</option>
                        <option value="FBC 2023">Florida Building Code 2023</option>
                        <option value="IBC 2021">International Building Code 2021</option>
                        <option value="IBC 2018">International Building Code 2018</option>
                        <option value="IBC 2015">International Building Code 2015</option>
                        <option value="IBC 2012">International Building Code 2012</option>
                        <option value="IBC 2009">International Building Code 2009</option>
                        <option value="IBC 2006">International Building Code 2006</option>
                        <option value="IBC 2003">International Building Code 2003</option>
                        <option value="IBC 2000">International Building Code 2000</option>
                        <option value="ASCE 7-22">ASCE 7-22</option>
                        <option value="ASCE 7-16">ASCE 7-16</option>
                        <option value="ASCE 7-10">ASCE 7-10</option>
                        <option value="ASCE 7-05">ASCE 7-05</option>
                        <option value="ASCE 7-02">ASCE 7-02</option>
                        <option value="ASCE 7-98">ASCE 7-98</option>
                    </select>
                </div>

                <div className="input-group">
                    <label className="input-label">Occupancy Group:</label>
                    <select
                        name="occupancyGroup"
                        className="input-field"
                        value={general.occupancyGroup}
                        onChange={handleChange}
                    >
                        {['A', 'B', 'E', 'F', 'H', 'I', 'M', 'R', 'S', 'U'].map(g => (
                            <option key={g} value={g}>{g}</option>
                        ))}
                    </select>
                    <span className="text-muted" style={{ marginLeft: '8px' }}>
                        {getOccupancyDescription(general.occupancyGroup)}
                    </span>
                </div>

                <div className="input-group">
                    <label className="input-label">Risk Category:</label>
                    <select
                        name="riskCategory"
                        className="input-field"
                        value={general.riskCategory}
                        onChange={handleChange}
                    >
                        <option value="I">I</option>
                        <option value="II">II</option>
                        <option value="III">III</option>
                        <option value="IV">IV</option>
                    </select>
                </div>
            </div>
        </div>
    );
};