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

import { useDispatch, useSelector } from "react-redux";

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

import { getHomeTerms } from "../../actions/homeActions";
import { popPanel } from "../../actions/panelActions";
import TButton, { TYPES } from "../../components/TButton/TButton";
import TPanel from "../../components/TPanel/TPanel";
import TPopUp from "../../components/TPopUp/TPopUp";
import * as Config from "../../utils/Config";
import { $L } from "../../utils/helperMethods";
import css from "./IntroPanel.module.less";
import useDebugKey from '../../hooks/useDebugKey';

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

export default function IntroPanel({ children, ...rest }) {
  const dispatch = useDispatch();
  useDebugKey({});
  const termsData = useSelector((state) => state.home.termsData);

  const [showExitButton, setShowExitButton] = useState(false);
  const [termsPopUpOpen, setTermsPopUpOpen] = useState(false);
  const [currentTerms, setCurrentTerms] = useState(null);

  useEffect(() => {
    dispatch(getHomeTerms({ trmsTpCdList: "MST00401, MST00402" }));
  }, [dispatch]);

  const handleTermsClick = useCallback(
    (trmsTpCdList) => {
      if (termsData && termsData.data && termsData.data.terms) {
        const selectedTerms = termsData.data.terms.find(
          (term) => term.trmsTpCd === trmsTpCdList
        );

        setCurrentTerms(selectedTerms);
        setTermsPopUpOpen(true);
      }
    },
    [termsData]
  );

  const handleAgree = useCallback(() => {
    dispatch(popPanel(Config.panel_names.INTRO_PANEL));
  }, [dispatch]);

  const handleDisagree = useCallback(() => {
    setShowExitButton(true);
  }, [showExitButton]);

  const confirmExit = useCallback(() => {}, []);

  const cancelExit = useCallback(() => {
    setShowExitButton(false);
  }, [showExitButton]);

  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} isTabActivated={false}>
        <Container {...rest} className={css.introLayout}>
          <div className={css.title}>
            {$L(`Welcome to `)}
            <span className={css.txtPoint}>
              {$L("Sh")}
              <span className={css.pointColor}>{$L("o")}</span>
              {$L(`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"
      >
        {currentTerms && (
          <div className={css.introTermsConts}>
            <div className={css.termsTitle}>
              {currentTerms.trmsTpCd === "MST00401"
                ? "Privacy Policy"
                : "Terms & Conditions"}
            </div>
            <div
              className={css.termsDesc}
              dangerouslySetInnerHTML={{
                __html: currentTerms && currentTerms.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>
    </>
  );
}
