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 { getWelcomeEventInfo } from "../../actions/eventActions";
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 "../WelcomeEventPanel/WelcomeEventPanel.module.less";

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

// EventInfos.eventData 임시 데이터
const dummyeEvnetData = {
  evntId: "", // 이벤트 아이디
  evntNm: "Win LG OLED TV and MORE!", // 이벤트 이름
  evntTpCd: "", // 이벤트 유형
  expsStrtDt: "2021. March 15st", // 전시 시작일시
  expsEndtDt: "2021. April 13st", // 전시 종료 일시
  evntImgUrl: "", // 이벤트 이미지 URL
  trmsBtnExpsFlag: "Y", // 약관 버튼 노출 여부
  trmsCntt: "", // 약관 내용
};

const WelcomeEventPanel = () => {
  const dispatch = useDispatch();
  const EventInfos = useSelector((state) => state.event);

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

  const handleTermsClick = useCallback(() => {
    if (EventInfos && EventInfos.eventData && EventInfos.eventData.trmsCntt) {
      const selectedTerms = EventInfos.eventData.trmsCntt;

      setCurrentTerms(selectedTerms);
      setTermsPopUpOpen(true);
    } else {
      setCurrentTerms("Terms Test");
      setTermsPopUpOpen(true);
    }
  }, [EventInfos]);

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

  const handleAgree = useCallback(() => {
    console.log("handleAgree");
  }, []);

  useEffect(() => {
    dispatch(getWelcomeEventInfo());
    Spotlight.focus("agree");
  }, []);

  return (
    <>
      <TPanel className={css.panel} isTabActivated={false}>
        <Container className={css.eventLayout}>
          <div className={css.textLayer}>
            <div className={css.title}>{$L(dummyeEvnetData.evntNm)}</div>
            <div className={css.date}>
              {$L(
                `(Period : ${dummyeEvnetData.expsStrtDt} ~ ${dummyeEvnetData.expsEndtDt})`
              )}
            </div>
            <div className={css.description}>
              {$L(
                `Just input your cell phone number and you’ll be applied automatically!\n`
              )}
              <span>
                {$L(`(Click below `)}
                <span className={css.pointColor}>{$L(`‘Agree’`)}</span>
                {$L(" button)")}
              </span>
            </div>
            <div className={css.BtnLayer}>
              <TButton
                className={css.agreeBtn}
                onClick={handleAgree}
                spotlightId="agree"
                type={TYPES.agree}
              >
                {$L("Agree")}
              </TButton>
              <TButton
                onClick={handleSkip}
                className={css.agreeBtn}
                type={TYPES.agree}
              >
                {$L("Skip")}
              </TButton>
            </div>
          </div>
          <div className={css.bottomBtnLayer}>
            {dummyeEvnetData.trmsBtnExpsFlag === "Y" && (
              <TButton
                onClick={() => handleTermsClick()}
                className={css.termsBtn}
                type={TYPES.terms}
              >
                {$L("Terms & Conditions")}
              </TButton>
            )}
          </div>
        </Container>
      </TPanel>
      {/* TERMS */}
      <TPopUp
        kind="introTermsPopup"
        open={termsPopUpOpen}
        onClose={() => setTermsPopUpOpen(false)}
        hasButton
        button1Text="OK"
        className={css.termsPopup}
      >
        {currentTerms && (
          <div className={css.introTermsConts}>
            <div className={css.termsTitle}>{$L("Terms & Conditions")}</div>
            <div
              className={css.termsDesc}
              dangerouslySetInnerHTML={{
                __html: currentTerms,
              }}
            />
          </div>
        )}
      </TPopUp>
    </>
  );
};

export default WelcomeEventPanel;
