import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import "./video.less";
import { ZoomInOutlined } from "@ant-design/icons";
import VideoTow from "./videoTow";
const HomeVideo = (props: Store) => {
  const { homeStore } = props;
  const [videoUrls, setVideoUrl] = useState<Array<string> | null>([]);
  const [showVideo, setShowVideo] = useState<boolean>(false);
  const [obj, setPbj] = useState<any>({
    width: "300px",
  });
  useEffect(() => {
    homeStore.getNewTask().then((res) => {
      setVideoUrl(res);
    });
    setShowVideo(homeStore.showVideo);
  }, [homeStore, homeStore.showVideo]);
  return (
    <div className="homeVideos">
      <ZoomInOutlined
        style={{
          color: "#fff",
          display: "block",
          textAlign: "right",
          zIndex: 999,
          marginRight: "20px",
          position: "absolute",
          right: "0px",
          top: "-7px",
        }}
        onClick={() => {
          if (obj.width === "300px") {
            setPbj({
              width: "0px",
            });
          } else {
            setPbj({
              width: "300px",
            });
          }
        }}
      />
      {showVideo ? (
        <div className="homeVideoBox" style={obj}>
          {videoUrls?.map((videoUrl, index) => {
            return (
              <div key={videoUrl} style={{ flex: "1", margin: "5px",height:"200px"}}>
                <VideoTow url={videoUrl} className="homeVideo" />;
              </div>
            );
          })}
        </div>
      ) : null}
    </div>
  );
};

export default inject("homeStore")(observer(HomeVideo));