import React, {
  useCallback,
  useEffect,
} from 'react';

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

import {
  changeLocalSettings,
  setHidePopup,
} from '../../actions/commonActions';
import { $L } from '../../utils/helperMethods';
import TPopUp from '../TPopUp/TPopUp';
import css from './EndOfServicePopUp.module.less';

export default function EndOfServicePopUp() {
  const dispatch = useDispatch();

  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
  const skipEndOfServicePopup = useSelector(
    (state) => state.localSettings.skipEndOfServicePopup
  );

  const expirationDate = new Date("2024-09-01");

  useEffect(() => {
    const now = new Date();
    if (now.getTime() > expirationDate.getTime()) {
      dispatch(setHidePopup());
      dispatch(
        changeLocalSettings({
          skipEndOfServicePopup: true,
        })
      );
    } else return;
  }, []);

  const onClose = useCallback(() => {
    dispatch(setHidePopup());
  }, [dispatch]);

  const handleSkip = useCallback(() => {
    dispatch(
      changeLocalSettings({
        skipEndOfServicePopup: true,
      })
    );
    dispatch(setHidePopup());
  }, [dispatch]);

  return (
    <TPopUp
      hasButton
      button2Text={$L("OK")}
      button1Text={$L("SKIP")}
      hasText
      text={
        <div
          dangerouslySetInnerHTML={{
            __html: `${$L(
              "The ShopTime service will no longer be available on your current TV starting September 1st. To continue using the service, please access ShopTime on 2018 and later TV models (webOS 4.0 or higher)."
            )}`,
          }}
        ></div>
      }
      open={popupVisible && !skipEndOfServicePopup}
      kind="textPopup"
      className={css.endOfServicePopup}
      onClose={onClose}
      onClick={handleSkip}
    />
  );
}
