import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import Video from "./video";
import "./video.less";

const HomeVideo = (props: Store) => {
  const { homeStore } = props;
  const [videoUrls, setVideoUrl] = useState<Array<string> | null>([]);
  useEffect(() => {
    // 获取最新任务
    homeStore.getNewTask().then((res) => {
      setVideoUrl(res);
    });
  }, [homeStore]);
  return (
    <div>
      {homeStore.showVideo ? (
        <div
          className="homeVideoBox"
          style={{
            width: "350px",
          }}
        >
          {videoUrls?.map((videoUrl, index) => {
            return (
              <div key={videoUrl} style={{ flex: "1", margin: "5px" }}>
                <Video url={videoUrl} className="homeVideo" />;
              </div>
            );
          })}
        </div>
      ) : null}
    </div>
  );
};

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