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

import $L from "@enact/i18n/$L";

import TPopUp from "../../../components/TPopUp/TPopUp";
import css from "../EventPopUpBanner/EventPopUpBanner.module.less";

export default function EventPopUpBanner({
  eventPopInfo,
  isEventPopupOpen = true,
}) {
  const [eventPopUpOpen, setEventPopUpOpen] = useState(false);

  useEffect(() => {
    setEventPopUpOpen(isEventPopupOpen);
  }, [isEventPopupOpen]);

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

  return (
    <TPopUp
      kind="eventBannerPopup"
      open={eventPopUpOpen}
      onClose={() => {
        setEventPopUpOpen(false);
      }}
      onClick={handleApply}
      hasButton
      button1Text={$L("Apply Now")}
      button2Text={$L("Skip")}
      className={css.eventBannerPopup}
    >
      {eventPopInfo && (
        <p>
          <img src={eventPopInfo.evntImgUrl} alt="eventpopupbanner" />
        </p>
      )}
    </TPopUp>
  );
}
