/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed 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 { observer } from 'mobx-react-lite';
import {
  LockIcon,
  FireIcon,
  StickArrowCircleRightIcon,
  Panel,
  PanelContent,
} from '@finos/legend-art';
import type { PackageableElement } from '@finos/legend-graph';
import { useEditorStore } from '../EditorStoreProvider.js';
import {
  ArtifactGenerationViewerState,
  getEditorLanguageForFormat,
  getTextContent,
} from '../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';

export const ArtifactGenerationViewer = observer(() => {
  const editorStore = useEditorStore();
  const generatedArtifactState =
    editorStore.tabManagerState.getCurrentEditorState(
      ArtifactGenerationViewerState,
    );
  const generatedArtifact = generatedArtifactState.artifact;
  const generator = generatedArtifact.parentId
    ? editorStore.graphManagerState.graph.getNullableElement(
        generatedArtifact.parentId,
      )
    : undefined;
  const visitGenerator = (fg: PackageableElement): void =>
    editorStore.graphEditorMode.openElement(fg);

  return (
    <div className="file-generation-viewer">
      <Panel>
        <div className="panel__header">
          <div className="panel__header__title">
            {
              <div className="uml-element-editor__header__lock">
                <LockIcon />
              </div>
            }
            <div className="panel__header__title__label">
              generated-artifact
            </div>
            <div className="panel__header__title__content">
              {generatedArtifact.name}
            </div>
          </div>
        </div>
        <div className="panel file-generation-viewer__content">
          <div className="panel__header">
            <div className="panel__header__title">
              <div className="panel__header__title__label">
                {generator?.name}
              </div>
            </div>
            <div className="panel__header__actions">
              {generator && (
                <button
                  className="uml-element-editor__header__generation-origin"
                  onClick={(): void => visitGenerator(generator)}
                  tabIndex={-1}
                  title={`Visit generation parent '${generator.path}'`}
                >
                  <div className="uml-element-editor__header__generation-origin__label">
                    <FireIcon />
                  </div>
                  <div className="uml-element-editor__header__generation-origin__parent-name">
                    {generator.name}
                  </div>
                  <div className="uml-element-editor__header__generation-origin__visit-btn">
                    <StickArrowCircleRightIcon />
                  </div>
                </button>
              )}
            </div>
          </div>
          <PanelContent>
            <CodeEditor
              inputValue={getTextContent(
                generatedArtifact.content,
                generatedArtifact.format,
              )}
              isReadOnly={true}
              language={getEditorLanguageForFormat(generatedArtifact.format)}
            />
          </PanelContent>
        </div>
      </Panel>
    </div>
  );
});