import useFetchHosting from "../utils/fetchHosting";
import { useNotification } from "../NotificationContext";
import { useCookies } from "react-cookie";
import CenteredContainer from "./ChildrenContainer";


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

const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
    const { reservedBy, update, id } = props;
    const [cookie] = useCookies<string>(['userName'])
    const userName = cookie.userName;
    const isReserved = reservedBy !== '';
    const notify = useNotification();

    const handleReserve = async () => {
        try {
            await update(userName, id);
            notify(`Успешно забронировано для ${userName}`, 'success');
        } catch (error) {
            notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
        }
    };

    return (
        <>
            <button onClick={handleReserve} disabled={isReserved}>
                {isReserved ? `${reservedBy}` : 'Занять'}
            </button>
        </>
    );
};

function Hosting() {

    const { data, error, loading, update } = useFetchHosting();
    return (
        <>
            <CenteredContainer>
                <h2>Поселение</h2>
                <p>
                    Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
                    вы не хотите тесниться, то рядом с нами есть
                    <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км от нашего дома).
                    Спальные места:
                </p>
            {loading && <div>Loading...</div>}
            {error && <div>Error</div>}
            {data && (
                <div className="table-wrapper scroll-indicator">
                    <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={Number(id)} />}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    <p className="scroll-instruction">Таблицу можно скроллить</p>
                </div>
            )}
            </CenteredContainer>
            <br />
        </>
    );
}

export default Hosting;