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 { useCallback, useEffect } from "react";

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

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

export default function TPopUp({
  kind,
  children,
  onExit,
  onClose,
  hasButton,
  hasText,
  button1Text,
  button2Text,
  open,
  title,
  text,
}) {
  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}>
      <Container>
        {hasText && (
          <>
            {title && <div>{title}</div>}
            {text && <div>{text}</div>}
          </>
        )}
        {children}
        {hasButton && (
          <>
            {button1Text && (
              <TButton
                spotlightId="tPopupBtn1"
                onClick={kind === "exit" ? onExit : onClose}
              >
                {button1Text}
              </TButton>
            )}
            {button2Text && (
              <TButton spotlightId="tPopupBtn2" onClick={onClose}>
                {button2Text}
              </TButton>
            )}
          </>
        )}
      </Container>
    </Alert>
  );
}