import * as React from "react";
import { Row, Input, Button } from "antd";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { createPipelineStore } from "./create_pipeline_store";
import { observer } from "mobx-react-lite";
import { List } from "../../../core/ui/list/list";

export const CreatePipelineScreenPath = "/create_pipeline";

export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
  return (
    <>
      <LoadPage
        largeText={"Create pipeline"}
        isError={createPipelineStore.isError}
        isLoading={createPipelineStore.isLoading}
        children={
          <>
            <Row>
              <List
                headers={"process"}
                values={createPipelineStore.processModels.map((el) => {
                  return { text: el.description };
                })}
                onClick={(e) => createPipelineStore.addProcess(e)}
              />
              <div style={{ flexGrow: "1" }}>
                <Input style={{ width: "300px" }} placeholder="description" />
                <Button onClick={() => createPipelineStore.createPipeline()}>
                  Save result
                </Button>
                <List
                  headers="new pipeline"
                  values={createPipelineStore.pipelineViewModel }
                />
              </div>

              <List
                headers="triggers"
                values={createPipelineStore.triggersModels.map((el) => {
                  return { text: el.description };
                })}
                onClick={(e) => createPipelineStore.addTrigger(e)}
              />
            </Row>
          </>
        }
      />
    </>
  );
});