import { useConnectionStore } from '../../store/connectionStore';

export const AngleInput = () => {
    const { angle, setAngle, materials, setMaterials } = useConnectionStore();

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

            <div className="input-group">
                <span className="input-label">Angle Leg on Support</span>
                <input
                    type="number"
                    step="0.125"
                    value={angle.legOnSupport}
                    onChange={(e) => setAngle({ legOnSupport: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <span className="input-label">Angle Leg on Beam</span>
                <input
                    type="number"
                    step="0.125"
                    value={angle.legOnBeam}
                    onChange={(e) => setAngle({ legOnBeam: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <span className="input-label">Angle Thickness</span>
                <input
                    type="number"
                    step="0.0625"
                    value={angle.thickness}
                    onChange={(e) => setAngle({ thickness: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div style={{ marginTop: '16px', marginBottom: '16px' }}>
                <div className="tabs">
                    <button
                        className={`tab ${angle.connectionMethod === 'bolted' ? 'active' : ''}`}
                        onClick={() => setAngle({ connectionMethod: 'bolted' })}
                    >
                        Bolted
                    </button>
                    <button
                        className={`tab ${angle.connectionMethod === 'welded' ? 'active' : ''}`}
                        onClick={() => setAngle({ connectionMethod: 'welded' })}
                    >
                        Welded
                    </button>
                </div>
            </div>

            <div className="input-group">
                <span className="input-label">Edge Distance (Horiz)</span>
                <input
                    type="number"
                    step="0.125"
                    value={angle.edgeDistanceHorizontal}
                    onChange={(e) => setAngle({ edgeDistanceHorizontal: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <span className="input-label">Edge Distance (Vert)</span>
                <input
                    type="number"
                    step="0.125"
                    value={angle.edgeDistanceVertical}
                    onChange={(e) => setAngle({ edgeDistanceVertical: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <span className="input-label">Eccentricity to Beam CL</span>
                <input
                    type="number"
                    step="0.125"
                    value={angle.eccentricityToBeamCL}
                    onChange={(e) => setAngle({ eccentricityToBeamCL: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div style={{ marginTop: '16px' }}>
                <div className="input-group">
                    <span className="input-label">Yield Strength Fy</span>
                    <input
                        type="number"
                        value={materials.angle.fy}
                        onChange={(e) => setMaterials({ angle: { ...materials.angle, fy: Number(e.target.value) } })}
                        className="input-field"
                    />
                    <span className="input-unit">ksi</span>
                </div>

                <div className="input-group">
                    <span className="input-label">Tensile Strength Fu</span>
                    <input
                        type="number"
                        value={materials.angle.fu}
                        onChange={(e) => setMaterials({ angle: { ...materials.angle, fu: Number(e.target.value) } })}
                        className="input-field"
                    />
                    <span className="input-unit">ksi</span>
                </div>
            </div>
        </div>
    );
};