/**
 * Analog Clock
 */

import React, { useState, useEffect } from "react";
import { rand } from "../utils/index.js";

const clock = {
  width: "20vw",
  height: "20vw",
  background: "url(assets/img/clock/clock.png)",
  backgroundSize: "contain",
  backgroundPosition: "center center",
  backgroundRepeat: "no-repeat",
  position: "relative",
};

const handStyle = {
  position: "absolute",
  top: "0%",
  left: "0%",
};

const hourStyle = {
  ...handStyle,
  height: "calc(540 / 1268 * 10vw)",
  transformOrigin: "45.46% 96.62%",
};

const minuteStyle = {
  ...handStyle,
  height: "calc(795 / 1268 * 10vw)",
  transformOrigin: "50% 84.05%",
};

const secondStyle = {
  ...handStyle,
  height: "calc(993 / 1268 * 10vw)",
  transformOrigin: "45.83% 76.63%",
};

const hourTransform =
  "translateX(10.45vw) translateY(10vw) translateX(-100%) translateY(-100%) ";
const minuteTransform =
  "translateX(10.45vw) translateY(10.8vw) translateX(-100%) translateY(-100%) ";
const secondTransform =
  "translateX(10.2vw) translateY(11.5vw) translateX(-100%) translateY(-100%) ";

export default function Clock({ utc }) {
  const [hour, setHour] = useState({});
  const [minute, setMinute] = useState({});
  const [second, setSecond] = useState({});

  useEffect(() => {
    const update = () => {
      const time = new Date();
      const hours = utc ? time.getUTCHours() : time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      const ms = time.getMilliseconds();
      setHour({
        ...hourStyle,
        transform:
          hourTransform +
          "rotate(" +
          (((hours % 12) + minutes / 60 + seconds / 3600) / 12) * 360 +
          "deg)",
      });
      setMinute({
        ...minuteStyle,
        transform:
          minuteTransform +
          "rotate(" +
          (minutes / 60 + seconds / 3600) * 360 +
          "deg)",
      });
      setSecond({
        ...secondStyle,
        transform:
          secondTransform +
          "rotate(" +
          (seconds / 60 + ms / 60000) * 360 +
          "deg)",
      });
    };
    update();
    const intervalId = setInterval(update, 50);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div style={clock}>
      <img src="assets/img/clock/hour.png" style={hour} />
      <img src="assets/img/clock/minute.png" style={minute} />
      <img src="assets/img/clock/second.png" style={second} />
    </div>
  );
}

// ratio: 500 / 1268
// hour: 540
// minute: 795
// second: 993

// hour transform origin: 40 x 515 // 88 / 533
// minute transform origin: 37 x 622 // 72 x 740
// second transform origin: 11 x 751 // 24 x 980