import React, { useEffect, useCallback } from "react";
import TButton, { TYPES } from "../../components/TButton/TButton";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spotlight from "@enact/spotlight";

import TPanel from "../../components/TPanel/TPanel";
import css from "./ServiceUnavailableNoticePanel.module.less";
import { $L } from "../../utils/helperMethods";

import ServiceLogoImage from "../../../assets/img-service-logo@3x.png";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

export default function ServiceUnavailableNoticePanel() {
  const confirmExit = useCallback(() => {
    if (typeof window === "object") {
      if (window.PalmSystem) {
        // gestureRelease();
        window.close();
      } else if (typeof window === "object") {
        window.location.reload();
      }
    }
  }, []);

  useEffect(() => {
    Spotlight.focus("exit");
  }, []);

  const description =
    $L(`The service will be temporarily suspended due to system maintenance for approximately 1 minute.
    We deeply apologize for the inconvenience.`);

  return (
    <TPanel className={css.panel} isTabActivated={false}>
      <Container className={css.serviceLayout}>
        <img src={ServiceLogoImage} className={css.serviceLogo} />
        <div className={css.serviceDescription}>{description}</div>
        <div className={css.bottomBtnLayer}>
          <TButton
            onClick={confirmExit}
            spotlightId="exit"
            type={TYPES.normal}
            className={css.exitBtn}
          >
            {$L("EXIT")}
          </TButton>
        </div>
      </Container>
    </TPanel>
  );
}
