import React, { useCallback } from "react";

import { useDispatch } from "react-redux";

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

import Logo from "../../../assets/images/img-service-logo@3x.png";
import { setExitApp } from "../../actions/commonActions";
import { $L } from "../../utils/helperMethods";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import css from "./NotSupportedVersion.module.less";

const Container = SpotlightContainerDecorator("div");

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

  const exitButtonClick = useCallback(() => {
    dispatch(setExitApp());
  }, [dispatch]);

  return (
    <Container className={css.container}>
      <CustomImage className={css.logo} src={Logo} alt="logo" />
      <p className={css.text}>
        {$L(
          "The ShopTime service is no longer available on your current TV. To continue using the service, please access ShopTime on 2018 and later TV models (webOS 4.0 or higher). "
        )}
      </p>
      <TButton className={css.exitButton} onClick={exitButtonClick}>
        {$L("EXIT")}
      </TButton>
    </Container>
  );
}
