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

import classNames from "classnames";

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

import IcUpComingsNormal from "../../../../../../assets/icon/badge/ic-upcomings-nor@3x.png";
import IcUpComingsSelected from "../../../../../../assets/icon/badge/ic-upcomings-sel@3x.png";
import { $L } from "../../../../../utils/helperMethods";
import css from "./UpComingCard.module.less";

const STRING_CONF = {
  REMINDER_SETTED: $L("Reminder Setted"),
  REMOVE_REMINDER: $L("Remove Reminder"),
  SET_REMINDER: $L("Set Reminder"),
  WITH_HOST: $L("With Host"),
};

const SpottableComponent = Spottable("div");

export default memo(function UpComingCard({
  hostName,
  onUpComingCardBlur,
  onUpComingCardClick,
  onUpComingCardFocus,
  showName,
  startTime,
  ...rest
}) {
  const [isFocused, setIsFocused] = useState(false);
  const [isSelected, setIsSelected] = useState(false);

  const handleBlur = useCallback(() => {
    setIsFocused(false);
    onUpComingCardBlur && onUpComingCardBlur();
  }, [onUpComingCardBlur]);

  const handleClick = useCallback(() => {
    if (isSelected) {
      setIsSelected(false);
      // @@pyh, Todo toast popup and action
      console.log(
        "@@\nReminder Notification is turned off.\nSelect Yes to turn on reminders."
      );
    } else {
      setIsSelected(true);
    }

    onUpComingCardClick && onUpComingCardClick();
  }, [isSelected, onUpComingCardClick]);

  const handleFocus = useCallback(() => {
    setIsFocused(true);
    onUpComingCardFocus && onUpComingCardFocus();
  }, [onUpComingCardFocus]);

  return (
    <SpottableComponent
      className={classNames(css.item, isSelected && css.selected)}
      onBlur={handleBlur}
      onClick={handleClick}
      onFocus={handleFocus}
      {...rest}
    >
      {!isFocused && (
        <div>
          <img
            src={isSelected ? IcUpComingsSelected : IcUpComingsNormal}
            alt=""
          />
          {isSelected && <span>{STRING_CONF.REMINDER_SETTED}</span>}
        </div>
      )}

      <time>
        {
          // @@pyh, Todo 시간 변환
          startTime
        }
      </time>
      <h3>{showName}</h3>
      <p>{STRING_CONF.WITH_HOST + " " + hostName}</p>

      {isFocused && (
        <button type="button">
          {isSelected ? STRING_CONF.REMOVE_REMINDER : STRING_CONF.SET_REMINDER}
        </button>
      )}
    </SpottableComponent>
  );
});
