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

import classNames from "classnames";

import Spottable from "@enact/spotlight/Spottable";

import IcUpcomingsNormal from "../../../../../../assets/images/badge/ic-upcomings-nor@3x.png";
import IcUpcomingsReserved from "../../../../../../assets/images/badge/ic-upcomings-sel@3x.png";
import { convertUtcToLocal } from "../../../../../components/MediaPlayer/util";
import { $L, convertToTimeFormat } from "../../../../../utils/helperMethods";
import css from "./UpComingCard.module.less";
import { useDispatch } from "react-redux";
import { sendLogTotalRecommend } from "../../../../../actions/logActions";

const SpottableComponent = Spottable("div");

const STRING_CONF = {
  REMINDER_SETTED: "Reminder Setted",
  REMOVE_REMINDER: "Remove Reminder",
  SET_REMINDER: "Set a Reminder",
  TURNED_OFF_MESSAGE:
    "Reminder Notification is turned off. Select Yes to turn on reminders.",
  WITH_HOST: "With Host",
};

export default memo(function UpComingCard({
  alamDispFlag,
  hstNm,
  onBlur,
  onClick,
  onFocus,
  showId,
  showNm,
  strtDt,
  order,
  partnerName,
  contextName,
  messageId,
  shelfTitle,
  shelfId,
  shelfOrder,
  catNm,
  brandName,
  ...rest
}) {
  const dispatch = useDispatch();
  const [isFocused, setIsFocused] = useState(false);

  const isReserved = alamDispFlag === "Y";

  const _onBlur = useCallback(() => {
    setIsFocused(false);

    if (onBlur) {
      onBlur();
    }
  }, [onBlur]);

  const _onClick = useCallback(() => {
    if (onClick) {
      onClick();

      if (contextName && messageId) {
        const params = {
          contextName: contextName,
          messageId: messageId,
          shelfTitle: shelfTitle,
          shelfLocation: shelfOrder,
          shelfId: shelfId,
          contentId: showId,
          contentTitle: showNm,
          partner: partnerName,
          location: order,
          category: catNm,
          brand: brandName,
        };

        dispatch(sendLogTotalRecommend(params));
      }
    }
  }, [onClick, contextName, messageId]);

  const _onFocus = useCallback(() => {
    setIsFocused(true);

    if (onFocus) {
      onFocus();
    }
  }, [onFocus]);

  const buttonText = isReserved
    ? "Set Reminder button"
    : "Remove Reminder button";

  const hstNmText = hstNm ? hstNm : "";
  const ariaLabel =
    `${convertToTimeFormat(convertUtcToLocal(strtDt), true)}` +
    " " +
    showNm +
    " " +
    hstNmText;
  return (
    <SpottableComponent
      className={classNames(css.card, isReserved && css.reserved)}
      onBlur={_onBlur}
      onClick={_onClick}
      onFocus={_onFocus}
      aria-label={ariaLabel}
      {...rest}
    >
      {!isFocused && (
        <div>
          <img
            src={isReserved ? IcUpcomingsReserved : IcUpcomingsNormal}
            alt=""
          />
          {isReserved && <span>{$L(STRING_CONF.REMINDER_SETTED)}</span>}
        </div>
      )}

      <time>{convertToTimeFormat(convertUtcToLocal(strtDt), true)}</time>
      <h3>{showNm}</h3>
      {hstNm && <p>{$L(STRING_CONF.WITH_HOST) + " " + hstNm}</p>}

      {isFocused && (
        <button type="button" aria-label={buttonText}>
          {isReserved
            ? $L(STRING_CONF.REMOVE_REMINDER)
            : $L(STRING_CONF.SET_REMINDER)}
        </button>
      )}
    </SpottableComponent>
  );
});
