import { useWindStore } from '../../store/windStore';
import { RoofType, EnclosureClassification } from '../../types';
import { InputGroup } from './InputGroup';

export const GeometryInput = () => {
    const { inputs, setDimensions, setParameters } = useWindStore();
    const { dimensions, parameters } = inputs;

    const roofTypes: { value: RoofType; label: string }[] = [
        { value: 'Gable', label: 'Gable' },
        { value: 'Monoslope', label: 'Monoslope' },
    ];

    const enclosureTypes: { value: EnclosureClassification; label: string }[] = [
        { value: 'Enclosed', label: 'Enclosed' },
        { value: 'Partially Enclosed', label: 'Partially Enclosed' },
    ];

    return (
        <div className="card">
            <div className="card-header">Building Geometry</div>

            <div className="flex-row gap-lg">
                <div className="flex-col gap-md" style={{ flex: 1 }}>
                    <InputGroup label="Ridge Height hr" unit="ft">
                        <input
                            type="number"
                            className="input-field"
                            value={dimensions.ridgeHeight}
                            onChange={(e) => setDimensions({ ridgeHeight: Number(e.target.value) })}
                        />
                    </InputGroup>
                    <InputGroup label="Eave Height he" unit="ft">
                        <input
                            type="number"
                            className="input-field"
                            value={dimensions.eaveHeight}
                            onChange={(e) => setDimensions({ eaveHeight: Number(e.target.value) })}
                        />
                    </InputGroup>
                    <InputGroup label="Building Width B" unit="ft">
                        <input
                            type="number"
                            className="input-field"
                            value={dimensions.width}
                            onChange={(e) => setDimensions({ width: Number(e.target.value) })}
                        />
                    </InputGroup>
                    <InputGroup label="Building Length L" unit="ft">
                        <input
                            type="number"
                            className="input-field"
                            value={dimensions.length}
                            onChange={(e) => setDimensions({ length: Number(e.target.value) })}
                        />
                    </InputGroup>

                    <div style={{ fontSize: '11px', color: 'var(--text-secondary)', marginLeft: '10px' }}>
                        L = dimension parallel to ridge
                    </div>
                </div>

                <div className="flex-col gap-lg" style={{ minWidth: '150px' }}>
                    <div>
                        <div style={{ fontWeight: 600, marginBottom: '8px' }}>Roof Type</div>
                        <div className="flex-col gap-xs">
                            {roofTypes.map((rt) => (
                                <label key={rt.value}>
                                    <input
                                        type="radio"
                                        name="roofType"
                                        checked={dimensions.roofType === rt.value}
                                        onChange={() => setDimensions({ roofType: rt.value })}
                                    />
                                    {rt.label}
                                </label>
                            ))}
                        </div>
                    </div>

                    <div>
                        <div style={{ fontWeight: 600, marginBottom: '8px' }}>Enclosure Classification</div>
                        <div className="flex-col gap-xs">
                            {enclosureTypes.map((et) => (
                                <label key={et.value}>
                                    <input
                                        type="radio"
                                        name="enclosure"
                                        checked={parameters.enclosureClassification === et.value}
                                        onChange={() => setParameters({ enclosureClassification: et.value })}
                                    />
                                    {et.label}
                                </label>
                            ))}
                        </div>
                    </div>
                </div>
            </div>

            <div className="flex-row gap-lg" style={{ marginTop: '20px' }}>
                <InputGroup label="Component: Roof Eff. Area Ae" unit="ft²">
                    <input type="number" className="input-field" defaultValue={100.0} disabled />
                </InputGroup>
                <InputGroup label="Component: Wall Eff. Area Ae" unit="ft²">
                    <input type="number" className="input-field" defaultValue={100.0} disabled />
                </InputGroup>
            </div>

        </div>
    );
};