import React, { useEffect, useState } from "react";
import { setInterval } from "timers";
import { Typography } from "antd";

import ToggleAutohideButton from "../../app/components/toggle_button/toggle_autohide_button/ToggleAutohideButton";

import "../../app/locale/i18n";
import "./DateTimeComponent.less";

const DATETIME_UPDATE_INTERVAL_IN_SEC = 1;
const { Text } = Typography;

export default function DateTime(props) {
  const { compact } = props;
  const [datetime, setDatetime] = useState(Date.now());

  useEffect(() => {
    setInterval(() => {
      setDatetime(Date.now());
    }, DATETIME_UPDATE_INTERVAL_IN_SEC * 1000);
  }, [setDatetime]);

  return (
    <div className={compact ? "footer_compact" : "footer"}>
      <div className="footer__controls">
        {compact ? <ToggleAutohideButton /> : null}
      </div>
      <div
        className={compact ? "footer__datetime_compact" : "footer__datetime"}
      >
        <Text className={compact ? "time_compact" : "time"}>
          {new Date(datetime).toLocaleTimeString("uk")}
        </Text>
        <Text className={compact ? "date_compact" : "date"}>
          {new Date(datetime).toLocaleDateString("uk")}
        </Text>
      </div>
    </div>
  );
}