import { useCookies } from "react-cookie";
import CenteredContainer from "./ChildrenContainer";
import useFetchUser from "../utils/fetchUser";
import type React from "react";
import ApologyMessage from "./Attendance";
import { useState } from "react";

const Attendance: React.FC = () => {
    const { updateAttendance, getAttendance } = useFetchUser()
    const [attendance, setAttendance] = useState<boolean | null>(null)
    const fetchAttendance = async () => {
            const is = await getAttendance()
            setAttendance(is)
        }
    fetchAttendance()

    const handleUpdate = async (status: boolean) => {
        await updateAttendance(status)
        window.location.reload();
    }

    if (attendance == false) {
        return (<ApologyMessage/>)
    }

    return (
        <>
            {attendance == null && (
                <>
                    <h3>Присоеденишься?</h3>
                    <p>(Можно и потом ответить)</p>
                    <button style={localStyles.buttonOk} onClick={() => handleUpdate(true)}>Да!</button>
                    <button style={localStyles.buttonNok} onClick={() => handleUpdate(false)}>Не смогу в этот раз</button>
                </>
            )}
            {attendance == true && (
                <>
                <h3>Круто! Ты с нами!</h3>
                <p>Если все же по разным обстоятельствам ты не сможешь/не захочешь, то всегда можно передумать</p>
                <button style={localStyles.buttonNok} onClick={() => handleUpdate(false)}>Все же никак</button>
                </>)}
        </>)
}

function Greeting() {
    const [cookie] = useCookies<string>(['userName'])
    const userName = cookie.userName;

    return (
        <>
            <CenteredContainer>
                <h1>Приглашение на Новый год 2025-2026 🎄</h1>
                <p className="mainText">
                    <h3>
                        {userName ? <>{userName}</> : <>Дорогая пятка!</>}
                        ! 🦶
                    </h3>
                    Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!

                    Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.

                </p>
                <Attendance/>
            </CenteredContainer>
        </>
    )
}

const localStyles = {
    buttonOk: {
        margin: '0.5em',
        padding: '0.3em',
        backgroundColor: 'green'
    },
    buttonNok: {
        margin: '0.5em',
        padding: '0.3em',
        backgroundColor: 'red'
    }
}

export default Greeting;