import { useState } from "react";
import useFetchHosting from "../utils/fetchHosting";


interface ReserveButtonProps {
  update: (name: string, id: number) => void,
  reservedBy: string,
  id: number,
}

const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
    const { reservedBy, update, id } = props;
    const [name, setName] = useState(reservedBy);
    const isReserved = reservedBy !== '';

    const handleReserve = async () => {
        if (name.trim()) {
            await update(name, id); // Call the update function from props with the name and id
        }
    };

    return (
        <>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Введите ваше имя"
                disabled={isReserved} // Disable if already reserved
            />
            <button onClick={handleReserve} disabled={isReserved}>
                {isReserved ? 'Занято' : 'Занять'}
            </button>
        </>
    );
};

function Hosting() {

    const { data, error, loading, update } = useFetchHosting();
    return (
        <>
            <h2>Поселение</h2>
            <p>
                Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
                но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
                вы не хотите тесниться, то рядом с нами есть
                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
                а так же
                <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
                (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
                <br />
                На данный момент мы можем вместить 5 гостей без лишних усилий.
                Это подразумевает:
            </p>
            {loading && <div>Loading...</div>}
            {error && <div>Error</div>}
            {data && (
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th>Размещение</th>
                                <th>Вместительность</th>
                                <th>Бронирование</th>
                            </tr>
                        </thead>
                        <tbody>
                            {Object.entries(data).map(([id, item]) => (
                                <tr key={id}>
                                    <td>{item.name}</td>
                                    <td>{item.capacity}</td>
                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id}/>}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )}
        </>
    );
}

export default Hosting;