import { Name } from "../Name";
import { DateTime } from "luxon";
import { useReminder } from "../ReminderContext";

export const User = ({ toggleCollapsed }) => {
    const [reminder] = useReminder();

    let days, hours, minutes, seconds;
    seconds = Math.floor(
        DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
    );
    [days, seconds] = [Math.floor(seconds / 86400), seconds % 86400];
    [hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600];
    [minutes, seconds] = [Math.floor(seconds / 60), seconds % 60];

    let string;
    if (days !== 0) {
        if (hours !== 0) {
            string = `${days} days, ${hours} hours`;
        } else {
            string = `${days} days`;
        }
    } else if (hours !== 0) {
        if (minutes !== 0) {
            string = `${hours} hours, ${minutes} minutes`;
        } else {
            string = `${hours} hours`;
        }
    } else if (minutes !== 0) {
        if (seconds !== 0) {
            string = `${minutes} minutes, ${seconds} seconds`;
        } else {
            string = `${minutes} minutes`;
        }
    } else {
        string = `${seconds} seconds`;
    }

    return (
        <div class="columns is-mobile column reminder-topbar">
            <Name />
            <div class="time-bar">in {string}</div>
            <div class="hide-button-bar">
                <button class="button hide-box" onClick={toggleCollapsed}>
                    <span class="is-sr-only">Hide reminder</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>
    );
};
