import React from 'react';
import { useBeamStore } from '../../store/useBeamStore';
import { getSectionDesignations } from '../../data/steelSections';

export const SteelPropertiesInput: React.FC = () => {
    const { steel, setSteelProperties } = useBeamStore();
    const designations = getSectionDesignations();

    return (
        <div className="card">
            <div className="card-header">Steel Properties</div>

            <div className="input-group">
                <label className="input-label">Beam</label>
                <select
                    className="input-field-wide"
                    value={steel.designation}
                    onChange={(e) => setSteelProperties({ designation: e.target.value })}
                >
                    {designations.map(d => (
                        <option key={d} value={d}>{d}</option>
                    ))}
                </select>
                <button className="success">Steel Database</button>
            </div>

            <div className="input-group">
                <label className="input-label">Steel Strength Fy</label>
                <input
                    type="number"
                    className="input-field"
                    value={steel.fy}
                    onChange={(e) => setSteelProperties({ fy: parseFloat(e.target.value) || 0 })}
                    step="0.1"
                />
                <span className="input-unit">ksi</span>
            </div>

            <div className="input-group">
                <label className="input-label">Modulus of Elasticity</label>
                <input
                    type="number"
                    className="input-field"
                    value={steel.e}
                    onChange={(e) => setSteelProperties({ e: parseFloat(e.target.value) || 0 })}
                    step="100"
                />
                <span className="input-unit">ksi</span>
            </div>

            <div className="input-group">
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                        type="checkbox"
                        checked={steel.useStiffnessFactor}
                        onChange={(e) => setSteelProperties({ useStiffnessFactor: e.target.checked })}
                    />
                    Use stiffness factor = 0.8 (Direct Analysis Method)
                </label>
            </div>
        </div>
    );
};