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 { SelectProjectRepository } from "../data/select_project_repository";

export const SelectProjectScreenPath = "/select_project";

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

  return (
    <>
      <LoadPage
        path={CreateProjectScreenPath}
        largeText={"Select project"}
        minText={"add new project?"}
        isLoading={selectProjectStore.isLoading}
        isError={selectProjectStore.isError}
        children={selectProjectStore.projects.map((el) => {
          return (
            <>
              <div>{el.description}</div>
              <div>+(РЕАЛИЗУЙ ТУТ ПЛЮСИК БЛЯТЬ ИЛИ КНОПКУ)</div>
            </>
          );
        })}
      />
    </>
  );
});