import React, { useState } from 'react';
import './DeliveryForm.css';

function DeliveryForm() {
    const [deliveryAddress, setDeliveryAddress] = useState('');
    const [deliveryDate, setDeliveryDate] = useState('');
    const [deliveryTime, setDeliveryTime] = useState('');
    const [product1, setProduct1] = useState('товар1');
    const [quantity1, setQuantity1] = useState(1);
    const [product2, setProduct2] = useState('товар4');
    const [quantity2, setQuantity2] = useState(1);
    const [comment, setComment] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log({
            deliveryAddress,
            deliveryDate,
            deliveryTime,
            products: [
                { product: product1, quantity: quantity1 },
                { product: product2, quantity: quantity2 },
            ],
            comment,
        });
        // Здесь можно добавить логику для отправки данных на сервер
    };

    return (
        <div className="container">
            <h1>Форма заказа доставки</h1>
            <form id="deliveryForm" onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="deliveryAddress">Адрес доставки:</label>
                    <input
                        type="text"
                        id="deliveryAddress"
                        name="deliveryAddress"
                        value={deliveryAddress}
                        onChange={(e) => setDeliveryAddress(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="deliveryDate">Дата доставки:</label>
                    <input
                        type="date"
                        id="deliveryDate"
                        name="deliveryDate"
                        value={deliveryDate}
                        onChange={(e) => setDeliveryDate(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="deliveryTime">Время доставки:</label>
                    <input
                        type="time"
                        id="deliveryTime"
                        name="deliveryTime"
                        value={deliveryTime}
                        onChange={(e) => setDeliveryTime(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Список товаров:</label>
                    <table className="product-table">
                        <thead>
                            <tr>
                                <th>Товар</th>
                                <th>Количество</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select
                                        name="product1"
                                        id="product1"
                                        value={product1}
                                        onChange={(e) => setProduct1(e.target.value)}
                                    >
                                        <option value="товар1">Товар 1</option>
                                        <option value="товар2">Товар 2</option>
                                        <option value="товар3">Товар 3</option>
                                    </select>
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        name="quantity1"
                                        value={quantity1}
                                        onChange={(e) => setQuantity1(e.target.valueAsNumber)}
                                        min="1"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select
                                        name="product2"
                                        id="product2"
                                        value={product2}
                                        onChange={(e) => setProduct2(e.target.value)}
                                    >
                                        <option value="товар4">Товар 4</option>
                                        <option value="товар5">Товар 5</option>
                                        <option value="товар6">Товар 6</option>
                                    </select>
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        name="quantity2"
                                        value={quantity2}
                                        onChange={(e) => setQuantity2(e.target.valueAsNumber)}
                                        min="1"
                                    />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <label htmlFor="comment">Комментарий к заказу:</label>
                    <textarea
                        id="comment"
                        name="comment"
                        rows="4"
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                    />
                </div>
                <button type="submit">Создать заказ</button>
            </form>
        </div>
    );
}

export default DeliveryForm;
