import * as React from "react";
import { useEffect, useState } from "react";
import {
  HttpMethod,
  HttpRepository,
  HttpRoute,
} from "../../core/repository/http_repository";
import { Button } from "antd";
import { Typography } from "antd";
import { Card } from "antd";
import { createProjectRoute } from "../create_project/create_project";
import { useNavigate } from "react-router-dom";
import { pathAjaxTopologyScreen } from "../topology_ajax_preview/topology_ajax_preview";
import { pathStabilityScreen } from "../stability_preview/stability_preview";

const { Text, Link, Title } = Typography;
function LinkCreateProjectPage() {
  const navigate = useNavigate();

  return (
    <Link
      style={{ paddingLeft: "10px" }}
      onClick={() => {
        navigate(createProjectRoute);
      }}
    >
      <> add new project?</>
    </Link>
  );
}

export const ProjectsPath = "/";
export const ProjectScreen: React.FunctionComponent = () => {
  const [projects, setProjects] = useState<Array<String>>([]);
  const navigate = useNavigate();

  useEffect(() => {
    async function fetchData() {
      setProjects(
        await HttpRepository.jsonRequest<Array<String>>(
          HttpMethod.GET,
          HttpRoute.projects
        )
      );
    }
    fetchData();
  }, []);
  return (
    <>
      <div className="centeredDiv">
        <Title>Projects</Title>
      </div>
      <div>
        {projects.length === 0 ? (
          <div className="centeredDiv">
            <Text>Not found projects</Text>

            <div>
              <LinkCreateProjectPage />
            </div>
          </div>
        ) : (
          <div></div>
        )}
      </div>
      <div className="projects-container">
        {projects.map((el) => {
          return (
            <>
              <Card style={{ width: 300 }}>
                <div>{el}</div>
                <Button onClick={() => {
                  navigate(pathAjaxTopologyScreen + el);
                }} > Preview topology ajax computed </Button>
                <Button onClick={() => {
                  navigate(pathStabilityScreen + el);
                }} > Preview stability computed </Button>

                <Button> Preview insert Path </Button>
                <Button>Preview assembly logical </Button>
              </Card>
            </>
          );
        })}
        <div> {projects.length === 0 ? <></> : <LinkCreateProjectPage />} </div>
      </div>
    </>
  );
};
