import React from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { useSelector } from "react-redux";
import store, { RootState } from "@/store";
import { envUrl } from "@/utils/history";

import closeImg from '@/assets/img/close.png'

function VideoBox() {
  const { videoInfo } = useSelector((state: RootState) => state.A2Main);

  return (
    <div
      className={classNames(
        styles.VideoBox,
        videoInfo.id ? styles.videoBoxAc : ""
      )}
    >
      <div
        className="videoClose"
        onClick={() =>
          store.dispatch({
            type: "main/lookVideo",
            payload: {
              id: 0,
              title: "",
              txt: "",
            },
          })
        }
      >
        <img src={closeImg} alt="" />
      </div>
      {videoInfo.id ? (
        <div className="vidoMain">
          <div className="videobox">
            <video src={envUrl + "/swData/1/1.mp4"} autoPlay controls></video>
          </div>
          <div className="videoTxt myscroll">
            <h3>{videoInfo.title}</h3>
            <p dangerouslySetInnerHTML={{ __html: videoInfo.txt }}></p>
          </div>
        </div>
      ) : null}
    </div>
  );
}

const MemoVideoBox = React.memo(VideoBox);

export default MemoVideoBox;