import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import * as Config from "../../utils/Config";
import TButton, { TYPES, SIZES } from "../../components/TButton/TButton";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spotlight from "@enact/spotlight";

import TPanel from "../../components/TPanel/TPanel";
import { getHomeTerms } from "../../api/homeApi";
import TPopUp from "../../components/TPopUp/TPopUp";

import css from "./IntroPanel.module.less";
import classNames from "classnames";
import { $L } from "../../utils/helperMethods";
import { addPanels, popPanel } from "../../features/panels/panelsSlice";

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

export default function IntroPanel({ children, ...rest }) {
  const dispatch = useDispatch();

  const [showExitButton, setShowExitButton] = useState(false);
  const [termsPopUpOpen, setTermsPopUpOpen] = useState(false);
  const [currentTermsData, setCurrentTermsData] = useState(null);
  const [currentTermsTitle, setCurrentTermsTitle] = useState(null);

  const handleTermsClick = async (trmsTpCdList) => {
    try {
      const termsData = await getHomeTerms({ trmsTpCdList });

      setCurrentTermsTitle(
        trmsTpCdList === "MST00401" ? "Privacy Policy" : "Terms & Conditions"
      );
      setCurrentTermsData(termsData.data.terms[0]);
      setTermsPopUpOpen(true);
    } catch (error) {
      console.error("Error Fetching terms: ", error);
    }
  };

  const handleAgree = () => {
    dispatch(popPanel(Config.panel_names.INTRO_PANEL));
  };

  const handleDisagree = () => {
    setShowExitButton(true);
  };

  const confirmExit = () => {};

  const cancelExit = () => {
    setShowExitButton(false);
  };

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

  const description =
    $L(`Check out more LIVE SHOWS and enjoy Shopping via your TV \n at Shop Time’s special prices by agreeing to the LG TV
  Shopping Terms and Conditions`);

  return (
    <>
      <TPanel className={css.panel}>
        <Container {...rest} className={css.introLayout}>
          <div className={css.title}>
            {`Welcome to `}
            <span className={css.txtPoint}>
              Sh<span className={css.pointColor}>o</span>p Time !
            </span>
          </div>
          <div className={css.description}>{description}</div>
          <div className={css.termsItemsLayer}>
            <TButton
              onClick={() => handleTermsClick("MST00402")}
              type={TYPES.terms}
            >
              {$L("Terms & Conditions")}
            </TButton>
            <TButton
              onClick={() => handleTermsClick("MST00401")}
              type={TYPES.terms}
            >
              {$L("Privacy Policy")}
            </TButton>
          </div>
          <div className={css.bottomBtnLayer}>
            <TButton
              onClick={handleAgree}
              spotlightId="introTermsAgree"
              type={TYPES.agree}
            >
              {$L("Agree")}
            </TButton>
            <TButton onClick={handleDisagree} type={TYPES.agree}>
              {$L("Do Not Agree")}
            </TButton>
          </div>
        </Container>
      </TPanel>

      {/* TERMS */}
      <TPopUp
        kind="introTermsPopup"
        open={termsPopUpOpen}
        onClose={() => setTermsPopUpOpen(false)}
        hasButton
        button1Text="OK"
      >
        {currentTermsData && (
          <div className={css.introTermsConts}>
            <div className={css.termsTitle}>{currentTermsTitle}</div>
            <div
              className={css.termsDesc}
              dangerouslySetInnerHTML={{
                __html: currentTermsData && currentTermsData.trmsCntt,
              }}
            />
          </div>
        )}
      </TPopUp>

      {/* DO NOT AGREE */}
      <TPopUp
        kind="textPopup"
        open={showExitButton}
        onExit={confirmExit}
        onClose={cancelExit}
        hasButton
        button1Text="Exit"
        button2Text="Cancel"
        hasText
        title="Exit Shop Time"
        text="Are you sure you want to exit Shop Time?"
      ></TPopUp>
    </>
  );
}