import * as React from "react";
import { observer } from "mobx-react-lite";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
import { SelectProjectStore } from "./select_project_store";
import { useNavigate } from "react-router-dom";
import { CreateProjectInstancePath } from "../../create_project_instance/create_project_instance";
import { Button } from "antd";
export const SelectProjectScreenPath = "/select_project";

export const SelectProjectScreen: React.FunctionComponent = observer(() => {
  const [selectProjectStore] = React.useState(() => new SelectProjectStore());
  const navigate = useNavigate();

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

  return (
    <>
      <LoadPage
        path={CreateProjectScreenPath}
        largeText={"Select project"}
        minText={"add new project?"}
        isLoading={selectProjectStore.isLoading}
        isError={selectProjectStore.errors.isNotEmpty()}
        children={selectProjectStore.projects.map((el) => {
          return (
            <>
              <div>{el.description}</div>
              <div>
                <Button onClick={() => navigate(CreateProjectInstancePath + el._id)}>create instance</Button>
              </div>
            </>
          );
        })}
      />
    </>
  );
});