import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';

export const AnchorageInput: React.FC = () => {
    const { anchorage, setAnchorage } = useDesignStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        setAnchorage({
            [name]: name === 'material' ? value : parseFloat(value) || 0
        });
    };

    return (
        <div className="card">
            <h3 className="mb-sm">Anchor Rods</h3>

            <div className="flex-col gap-sm">
                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Number of Rods</label>
                    <input type="number" name="count" value={anchorage.count} onChange={handleChange} className="input-field" step="1" />
                </div>

                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Diameter</label>
                    <select name="diameter" value={anchorage.diameter} onChange={handleChange} className="input-field" style={{ width: '80px' }}>
                        <option value="0.75">3/4"</option>
                        <option value="1.0">1"</option>
                        <option value="1.25">1-1/4"</option>
                        <option value="1.5">1-1/2"</option>
                    </select>
                </div>

                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Material</label>
                    <select name="material" value={anchorage.material} onChange={handleChange} className="input-field" style={{ width: '100px' }}>
                        <option value="F1554-36">F1554-36</option>
                        <option value="F1554-55">F1554-55</option>
                        <option value="F1554-105">F1554-105</option>
                    </select>
                </div>

                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Embedment hef</label>
                    <input type="number" name="hef" value={anchorage.hef} onChange={handleChange} className="input-field" />
                    <span>in</span>
                </div>
            </div>
        </div>
    );
};