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

function getTimes() {
  const total_ms =
    Date.now() - new Date("December 11, 2020 00:00:00 GMT-05:00");
  const days = Math.floor(total_ms / 1000 / 60 / 60 / 24);
  const days_in_ms = days * 1000 * 60 * 60 * 24;
  const hours = Math.floor((total_ms - days_in_ms) / 1000 / 60 / 60);
  const hours_in_ms = hours * 1000 * 60 * 60;
  const minutes = Math.floor((total_ms - days_in_ms - hours_in_ms) / 1000 / 60);
  const minutes_in_ms = minutes * 1000 * 60;
  const seconds = Math.floor(
    (total_ms - days_in_ms - hours_in_ms - minutes_in_ms) / 1000
  );
  return {
    days: `${days} days,`,
    hours: `${hours} hours,`,
    minutes: `${minutes} minutes,`,
    seconds: `and ${seconds} seconds.`,
  };
}

export const getServerSideProps = async () => {
  return {
    props: {
      startTimes: getTimes(),
    },
  };
};

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

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

  return (
    <BasicPage
      page_title="Alexis Werefox HRT Tracker"
      card_title="Track my HRT progress!"
      page_button_title="Take me back home!"
    >
      <WCard title={`I'm so glad you're interested!!`}>
        <div className="p-2 sm:text-xl text-lg text-center text-skye-werefox-blue-dark dark:text-skye-werefox-blue grid grid-cols-1 grid-rows-4 gap-2">
          <p>I've been on HRT for:</p>
          {Object.keys(timesArray).map((t) => (
            <p key={t}>{timesArray[t]}</p>
          ))}
        </div>
      </WCard>
    </BasicPage>
  );
}