import Editor, { type EditorProps } from "@monaco-editor/react";
import { DatapointDto, DatapointDtoSourceEnum, DatasetDto } from "@montelo/browser-client";
import { useFetcher, useParams } from "@remix-run/react";
import { Dispatch, FC, SetStateAction, useEffect } from "react";
import { Button } from "~/components/ui/button";
import { DialogFooter } from "~/components/ui/dialog";
import { Label } from "~/components/ui/label";
import { Routes } from "~/routes";
import { CreateDatapointActionTypes } from "~/types/CreateDatapointAction.types";

type Props = {
  source: DatapointDtoSourceEnum;
  sourceId: string;
  logSchema: string;
  inputSchema: string;
  setInputSchema: Dispatch<SetStateAction<string>>;
  outputSchema: string;
  setOutputSchema: Dispatch<SetStateAction<string>>;
  canEdit: boolean;
  selectedDataset: DatasetDto | undefined;
  handleDialogChange: (open: boolean) => void;
};

export const AddToDatasetContent: FC<Props> = ({
  source,
  sourceId,
  logSchema,
  inputSchema,
  setInputSchema,
  outputSchema,
  setOutputSchema,
  canEdit,
  selectedDataset,
  handleDialogChange,
}) => {
  const params = useParams();
  const fetcher = useFetcher<{ datapoint: DatapointDto }>();

  const editorOptions: EditorProps["options"] = {
    minimap: { enabled: false },
    scrollbar: { vertical: "hidden" },
    lineNumbers: "off",
    wordWrap: "on",
    tabSize: 2,
  };

  const handleAdd = () => {
    fetcher.submit(
      {
        datasetId: selectedDataset?.id,
        input: JSON.parse(inputSchema),
        expectedOutput: JSON.parse(outputSchema),
        source,
        sourceId,
      } as CreateDatapointActionTypes,
      {
        method: "POST",
        action: Routes.actions.datapoints.create({
          projectId: params.projectId!,
        }),
        encType: "application/json",
      },
    );
  };

  useEffect(() => {
    if (fetcher.data) {
      handleDialogChange(false);
    }
  }, [fetcher.data]);

  return (
    <>
      <div className="grid grid-cols-3 gap-4">
        <div>
          <Label>Current Log</Label>
          <Editor
            height={"450px"}
            defaultLanguage="json"
            defaultValue={logSchema}
            theme="vs-dark"
            options={{ ...editorOptions, readOnly: true }}
          />
        </div>
        <div>
          <Label>Input</Label>
          <Editor
            height={"450px"}
            defaultLanguage="json"
            defaultValue={inputSchema}
            value={inputSchema}
            onChange={(value) => setInputSchema(value || "")}
            theme="vs-dark"
            options={{ ...editorOptions, readOnly: !canEdit }}
          />
        </div>
        <div>
          <Label>Expected Output</Label>
          <Editor
            height={"450px"}
            defaultLanguage="json"
            defaultValue={outputSchema}
            value={outputSchema}
            onChange={(value) => setOutputSchema(value || "")}
            theme="vs-dark"
            options={{ ...editorOptions, readOnly: !canEdit }}
          />
        </div>
      </div>
      <DialogFooter>
        <Button disabled={!canEdit} onClick={handleAdd}>
          Add {selectedDataset ? `to ${selectedDataset?.name}` : ""}
        </Button>
      </DialogFooter>
    </>
  );
};
