/*
 * https://frontendeval.com/questions/analog-clock
 *
 * Create an analog clock with hour, minute, and second hands. Each of the hands should be accurate to the browser's local timezone and update once per second.
 */

const Clock = ({ tz = "Asia/Kolkata" }) => {
  const getTime = (timeZone) => {
    const t = new Intl.DateTimeFormat(
      {},
      {
        timeZone,
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        hourCycle: "h11"
      }
    ).formatToParts();

    const obj = t.reduce((acc, curr) => {
      return { ...acc, [curr.type]: +curr.value };
    }, {});

    const { hour, minute: min, second: sec, ...rest } = obj;

    return { hour, min, sec };
  };

  const getKeyframes = (value) => {
    const start = value * 30;
    const end = start + 360;

    return [
      { transform: `rotate(${start}deg)` },
      { transform: `rotate(${end}deg)` }
    ];
  };

  const hourRef = React.useRef(null);
  const minRef = React.useRef(null);
  const secRef = React.useRef(null);

  React.useEffect(() => {
    if (hourRef.current && minRef.current && secRef.current) {
      const time = getTime(tz);

      const animOptions = {
        iterations: Infinity,
        easing: "steps(60, end)"
      };

      hourRef.current.animate(getKeyframes(time.hour), {
        ...animOptions,
        duration: 3600000 * 60
      });
      
      minRef.current.animate(getKeyframes(time.min), {
        ...animOptions,
        duration: 3600000
      });
      secRef.current.animate(getKeyframes(time.sec), {
        ...animOptions,
        duration: 60000
      });
    }
  }, [hourRef, minRef, secRef]);

  return (
    <aside className="clock">
      <div className="hand hour" ref={hourRef}></div>
      <div className="hand min" ref={minRef}></div>
      <div className="hand sec" ref={secRef}></div>
    </aside>
  );
};

const App = () => {
  const TIME_ZONES = ["Asia/Kolkata", "Australia/Sydney", "America/New_York"];

  return (
    <main>
      {TIME_ZONES.map((tz) => (
        <div key={`clock-${tz}`}>
          <h2>{tz}</h2>
          <Clock tz={tz} />
        </div>
      ))}
    </main>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));