/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { Box } from "@chakra-ui/react";
import { DiffEditor, type DiffEditorProps } from "@monaco-editor/react";

import { useColorMode } from "src/context/colorMode";

type CodeDiffViewerProps = {
  readonly height?: string;
  readonly language?: string;
  readonly modifiedCode: string;
  readonly originalCode: string;
  readonly renderSideBySide?: boolean;
};

export const CodeDiffViewer = ({
  height = "full",
  language = "python",
  modifiedCode,
  originalCode,
  renderSideBySide = true,
}: CodeDiffViewerProps) => {
  const { colorMode } = useColorMode();

  const diffOptions: DiffEditorProps["options"] = {
    automaticLayout: true,
    contextmenu: false,
    find: {
      addExtraSpaceOnTop: false,
      autoFindInSelection: "never" as const,
      seedSearchStringFromSelection: "always" as const,
    },
    fontSize: 14,
    glyphMargin: false,
    ignoreTrimWhitespace: false,
    lineDecorationsWidth: 20,
    lineNumbers: "on",
    minimap: { enabled: false },
    originalEditable: false,
    readOnly: true,
    renderLineHighlight: "none",
    renderSideBySide,
    scrollbar: {
      vertical: "hidden",
      verticalScrollbarSize: 10,
    },
  };

  const theme = colorMode === "dark" ? "vs-dark" : "vs-light";

  return (
    <Box
      css={{
        "& *::selection": {
          bg: "gray.emphasized",
        },
      }}
      fontSize="14px"
      height={height}
      zIndex={1}
    >
      <DiffEditor
        language={language}
        modified={modifiedCode}
        options={diffOptions}
        original={originalCode}
        theme={theme}
      />
    </Box>
  );
};
