import BasicPage from "../../components/basic-page-template";
import WCard from "../../components/werefox-card";
import { useEffect, useState } from "react";

function getTimes(interval) {
  let expected = Date.now() - new Date("December 11, 2020 00:00:00") + interval;
  let days = Math.round(expected / 1000 / 60 / 60 / 24);
  let hours = (new Date(expected).getHours() + 6) % 24;
  let minutes = new Date(expected).getMinutes();
  let seconds = new Date(expected).getSeconds();
  return {
    expected: expected,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
  };
}

export default function HRT() {
  const [timesArray, setTimesArray] = useState(getTimes());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimesArray(getTimes(0), 1000);
    });
    return () => clearInterval(interval);
  }, [getTimes, setTimesArray]);

  const initialTimesArray = [
    `${timesArray["days"]} days, `,
    `${timesArray["hours"]} hours, `,
    `${timesArray["minutes"]} minutes, `,
    `and ${timesArray["seconds"]} seconds`,
  ];

  return (
    <BasicPage
      page_title="Alexis Werefox HRT Tracker"
      card_title="Track my HRT progress!"
    >
      <WCard>
        <p className="p-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
          I'm so glad you're interested!!
          <br />
          I have been on HRT for:
          <br />
          <p className="grid grid-cols-1 grid-rows-4">
            {initialTimesArray.map((t, n) => (
              <p id={`time_${n}`}>{t}</p>
            ))}
          </p>
        </p>
      </WCard>
    </BasicPage>
  );
}