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

export const LoadCombinationsInput: React.FC = () => {
    const { loadCombinations, setLoadCombinations, calculate } = useBeamStore();

    return (
        <div className="card">
            <div className="card-header">Load Combinations \u0026 Design</div>

            <div style={{ marginBottom: '16px' }}>
                <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '13px' }}>Load Combinations</div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                    <input
                        type="radio"
                        name="loadCombType"
                        checked={loadCombinations.type === 'pre-combined'}
                        onChange={() => setLoadCombinations({ type: 'pre-combined' })}
                    />
                    Specify one single set of pre-combined loads
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                    <input
                        type="radio"
                        name="loadCombType"
                        checked={loadCombinations.type === 'asdip-combinations'}
                        onChange={() => setLoadCombinations({ type: 'asdip-combinations' })}
                    />
                    Specify a set of load cases and let ASDIP combine them
                </label>

                {loadCombinations.type === 'asdip-combinations' && (
                    <button className="primary" style={{ marginTop: '8px' }}>
                        Go to Load Combinations
                    </button>
                )}
            </div>

            <div style={{ marginBottom: '16px' }}>
                <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '13px' }}>Design Method</div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                    <input
                        type="radio"
                        name="designMethod"
                        checked={loadCombinations.designMethod === 'ASD'}
                        onChange={() => setLoadCombinations({ designMethod: 'ASD' })}
                    />
                    ASD - Use the service load combinations
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                        type="radio"
                        name="designMethod"
                        checked={loadCombinations.designMethod === 'LRFD'}
                        onChange={() => setLoadCombinations({ designMethod: 'LRFD' })}
                    />
                    LRFD - Use the factored load combinations
                </label>
            </div>

            <button
                className="primary"
                style={{ width: '100%', padding: '12px', fontSize: '16px', fontWeight: 600 }}
                onClick={() => calculate()}
            >
                Calculate Design
            </button>
        </div>
    );
};