import React, { useCallback, useEffect } from "react";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ServiceLogoImage from "../../../assets/images/img-service-logo@3x.png";
import TButton, { TYPES } from "../../components/TButton/TButton";
import TPanel from "../../components/TPanel/TPanel";
import { $L, removeSpecificTags } from "../../utils/helperMethods";
import css from "./ErrorPanel.module.less";
import useDebugKey from "../../hooks/useDebugKey";
import { useSelector } from "react-redux";

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

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

  const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);

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

  const description = panelInfo?.apiSysMessage;

  const sanitizedDescription = description
    ? removeSpecificTags(description)
    : "";

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