import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import Spotlight from "@enact/spotlight";
import Alert from "@enact/sandstone/Alert";
import { $L } from "../../utils/helperMethods";

import React, { useCallback, useEffect } from "react";

import TButton from "../TButton/TButton";

import css from "../TPopUp/TPopUp.module.less";
import classNames from "classnames";

const Container = SpotlightContainerDecorator(
  { enterTo: "default-element", preserveId: true },
  Spottable("div")
);
const SpottableComponent = Spottable("div");

const KINDS = ["textPopup", "termsPopup", "introTermsPopup"];

export default function TPopUp({
  kind,
  children,
  onExit,
  onClose,
  hasButton,
  hasText,
  className,
  button1Text,
  button2Text,
  open,
  title,
  text,
}) {
  useEffect(() => {
    if (KINDS.indexOf(kind) < 0) {
      console.error("TPopUp kind error");
    }
  }, [kind]);

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

  const _onClose = useCallback(
    (e) => {
      if (onClose) {
        onClose(e);
      }
    },
    [onClose]
  );

  return (
    <Alert
      open={open}
      onClose={_onClose}
      type="overlay"
      kind={kind}
      className={classNames(
        css.tPopUp,
        css[kind],
        title && css.title,
        text && css.text,
        hasButton && css.hasButton,
        className ? className : null
      )}
    >
      <Container className={css.info}>
        {hasText && (
          <div className={css.textLayer}>
            {title && <div className={css.title}>{title}</div>}
            {text && <div className={css.text}>{text}</div>}
          </div>
        )}
        {children}
        {hasButton && (
          <div className={css.buttonContainer}>
            {button1Text && (
              <TButton
                spotlightId="tPopupBtn1"
                onClick={kind === "exit" ? onExit : onClose}
              >
                {button1Text}
              </TButton>
            )}
            {button2Text && (
              <TButton spotlightId="tPopupBtn2" onClick={onClose}>
                {button2Text}
              </TButton>
            )}
          </div>
        )}
      </Container>
    </Alert>
  );
}
