import { useState } from 'react';
import { useConnectionStore } from '../../store/connectionStore';
import { SteelDatabaseModal, type SteelShape } from '../SteelDatabaseModal';

export const BeamInput = () => {
    const { beam, setBeam, materials, setMaterials } = useConnectionStore();
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleShapeSelect = (shape: SteelShape) => {
        setBeam({
            designation: shape.designation,
            d: shape.d,
            tw: shape.tw,
            tf: shape.tf,
            bf: shape.bf,
        });
    };

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

                <div className="input-group">
                    <span className="input-label">Beam Designation</span>
                    <input
                        type="text"
                        value={beam.designation}
                        onChange={(e) => setBeam({ designation: e.target.value })}
                        className="input-field-wide"
                        style={{ maxWidth: '150px' }}
                    />
                    <button
                        className="steel-database-btn"
                        onClick={() => setIsModalOpen(true)}
                    >
                        Steel Database
                    </button>
                </div>

                <div className="input-group">
                    <span className="input-label">Beam Gap from Support</span>
                    <input
                        type="number"
                        step="0.125"
                        value={beam.gapFromSupport}
                        onChange={(e) => setBeam({ gapFromSupport: 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.beam.fy}
                            onChange={(e) => setMaterials({ beam: { ...materials.beam, 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.beam.fu}
                            onChange={(e) => setMaterials({ beam: { ...materials.beam, fu: Number(e.target.value) } })}
                            className="input-field"
                        />
                        <span className="input-unit">ksi</span>
                    </div>
                </div>
            </div>

            <SteelDatabaseModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                onSelect={handleShapeSelect}
                title="Select Beam Shape"
            />
        </>
    );
};