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("li");

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

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

  useEffect(() => {
    Spotlight.focus("tPopupBtn1");
    Spotlight.focus("tPopupBtn2");
    // TODO
    // if (options) Spotlight.focus(`option_${selectedOptionIdx}`)
  }, []);

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

  const handleOptionClick = useCallback((index) => {
    setSelectedOptionIdx(index);
    _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>
        )}
        {options && (
          <ul
            className={classNames(
              css.optionLayer,
              options.length >= 5 ? css.optionScroll : null
            )}
          >
            {options.map((option, index) => (
              <SpottableComponent
                {...rest}
                className={classNames(
                  css.option,
                  index === selectedOptionIdx ? css.selectedOption : null
                )}
                spotlightId={
                  index === selectedOptionIdx ? `option_${index}` : null
                }
                onClick={() => {
                  handleOptionClick(index);
                }}
                key={index}
              >
                {useOptionImg && (
                  <img
                    src={option.optImgUrl}
                    alt="option_img"
                    className={css.img}
                  />
                )}
                {$L(option.prodOptCval)}
              </SpottableComponent>
            ))}
          </ul>
        )}
        {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>
  );
}