import * as React from "react";
import { AllProjectStore } from "./all_projects_store";
import { ProjectRepository } from "../data/project_repository";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { observer } from "mobx-react-lite";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
import { CreateProjectScreenPath } from "../../create_project/create_project_screen";

export const AllProjectScreenPath = "/";
export const AllProjectScreen: React.FunctionComponent = observer(() => {
  const [store] = React.useState(() => new AllProjectStore(new ProjectRepository()));
  const navigate = useNavigate();

  React.useEffect(() => {
    store.init();
  }, [store]);

  return (
    <>
      <LoadPage
        largeText={"Projects"}
        needBackButton={false}
        minText="create project?"
        path={CreateProjectScreenPath}
        isError={store.isError}
        isLoading={store.isLoading}
        children={
          <div>
            {store.projectsModels?.map((el) => {
              return (
                <div style={{ margin: "10px", backgroundColor: "Highlight" }}>
                  {el.isActive ? (
                    <Button
                      onClick={() => {
                        navigate(`${PipelineInstanceScreenPath}${el._id}`);
                      }}
                    >
                      instance screen
                    </Button>
                  ) : null}
                  <div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
                </div>
              );
            })}
          </div>
        }
      />
    </>
  );
});