import React, { useState, useContext, useEffect } from 'react';
import firebase from '../firebase';
import Calendar from 'react-calendar';

import './Countdown.css';
import { UserContext } from '../contexts/UserContext';


const useFetchCountdown = (user) => {

    let [countdownDate, setCountdownDate] = useState({ time: new firebase.firestore.Timestamp() });

    useEffect(() => {
        const unsubscribe = firebase.firestore().collection('countdowns').where('user', '==', user.uid).onSnapshot(
            data => {
                setCountdownDate(data.docs[0].data());
            }
        );
        return () => unsubscribe();
    }, [user]);

    return countdownDate;
}

const Countdown = () => {
    const user = useContext(UserContext).user;
    const n = useFetchCountdown(user);
    const days = (n.time.toDate().getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)

    const [showCalendar, setShowCalendar] = useState(false);

    return (
        <div className="coutdown-component">
            <div className="countdown-container">
                <p>
                    {parseInt(days)} days left until birthday.
                </p>
                <button className="countdown-settings-toggle" onClick={() => (setShowCalendar(!showCalendar))} >
                    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#2c3e50" fill="none" strokeLinecap="round" strokeLinejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" />
                        <path className={showCalendar ? "cog cog-active" : "cog cog-inactive"} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <circle cx="12" cy="12" r="3" />
                    </svg>
                </button>
            </div>
            <div className="calendar-container">
                {showCalendar ? <Calendar /> : ""}
            </div>
        </div>

    );
}

export default Countdown;