/**
 * 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 { useEditorStore } from '../../EditorStoreProvider.js';
import {
  Dialog,
  Modal,
  ModalBody,
  ModalFooter,
  ModalFooterButton,
  ModalHeader,
  ModalTitle,
  PanelContent,
  PanelHeader,
  PanelHeaderActions,
  EyeIcon,
  ModalHeaderActions,
  CustomSelectorInput,
  FlaskIcon,
  SQLIcon,
  clsx,
  PanelLoadingIndicator,
  CubeIcon,
  CaretDownIcon,
  ControlledDropdownMenu,
  MenuContent,
  MenuContentItem,
} from '@finos/legend-art';
import {
  INGEST_DEFINITION_TAB,
  IngestDefinitionEditorState,
} from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import React, { useEffect, useState } from 'react';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { flowResult } from 'mobx';

import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import {
  LINEAGE_VIEW_MODE,
  LineageViewerContent,
  IngestionDefinitionArtifactViewer,
} from '@finos/legend-query-builder';
import type { MatViewDataSet } from '@finos/legend-graph';
import { IngestTestableEditor } from './testable/IngestTestableEditor.js';
import { getIngestMaterializedViews } from '../../../../stores/graph-modifier/DSL_Ingest_GraphModifierHelper.js';

export const IngestLineageModal = observer(
  (props: { ingestDefinitionEditorState: IngestDefinitionEditorState }) => {
    const { ingestDefinitionEditorState } = props;

    const matviewFunctions =
      ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS;
    const matviewNames =
      ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.map(
        (dataset) => dataset.name,
      ) ?? [];
    const [selectedMatview, setSelectedMatview] = useState<
      MatViewDataSet | undefined
    >(undefined);

    useEffect(() => {
      if (!selectedMatview && matviewFunctions && matviewFunctions.length > 0) {
        setSelectedMatview(matviewFunctions[0]);
      }
    }, [matviewFunctions, selectedMatview]);

    useEffect(() => {
      ingestDefinitionEditorState.lineageState.setSelectedTab(
        LINEAGE_VIEW_MODE.DATABASE_LINEAGE,
      );
    }, [ingestDefinitionEditorState.lineageState]);

    if (!matviewFunctions || matviewFunctions.length === 0) {
      return null;
    }

    const isDarkMode =
      !ingestDefinitionEditorState.lineageState.applicationStore.layoutService
        .TEMPORARY__isLightColorThemeEnabled;

    const closeLineageViewer = (): void => {
      ingestDefinitionEditorState.lineageState.setLineageData(undefined);
      ingestDefinitionEditorState.lineageState.setSelectedTab(
        LINEAGE_VIEW_MODE.DATABASE_LINEAGE,
      );
      ingestDefinitionEditorState.lineageState.clearPropertySelections();
    };

    type DatasetOption = {
      label: string;
      value: MatViewDataSet;
    };

    const datasetOptions: DatasetOption[] = matviewNames
      .map((name, index) => {
        const dataset = matviewFunctions[index];
        if (dataset) {
          return {
            label: name,
            value: dataset,
          };
        }
        return null;
      })
      .filter((option): option is DatasetOption => option !== null);

    const handleDatasetChange = (option: DatasetOption | null): void => {
      if (option?.value) {
        setSelectedMatview(option.value);
        flowResult(
          ingestDefinitionEditorState.generateLineage(option.value),
        ).catch(
          ingestDefinitionEditorState.editorStore.applicationStore
            .alertUnhandledError,
        );
      }
    };

    return (
      <>
        <Dialog
          open={Boolean(ingestDefinitionEditorState.lineageState.lineageData)}
          onClose={closeLineageViewer}
        >
          <Modal className="editor-modal" darkMode={isDarkMode}>
            <ModalHeader>
              <ModalTitle title="LineageViewer" />
              <ModalHeaderActions>
                <CustomSelectorInput
                  options={datasetOptions}
                  onChange={handleDatasetChange}
                  value={
                    selectedMatview
                      ? {
                          label: selectedMatview.name,
                          value: selectedMatview,
                        }
                      : null
                  }
                  darkMode={isDarkMode}
                />
              </ModalHeaderActions>
            </ModalHeader>
            <ModalBody>
              <div className="lineage-viewer" style={{ height: '100%' }}>
                <LineageViewerContent
                  lineageState={ingestDefinitionEditorState.lineageState}
                />
              </div>
            </ModalBody>
            <ModalFooter className="editor-modal__footer">
              <ModalFooterButton
                onClick={closeLineageViewer}
                text="Close"
                type="secondary"
              />
            </ModalFooter>
          </Modal>
        </Dialog>
      </>
    );
  },
);

export const IngestDefinitionEditor = observer(() => {
  const editorStore = useEditorStore();
  const ingestDefinitionEditorState =
    editorStore.tabManagerState.getCurrentEditorState(
      IngestDefinitionEditorState,
    );
  const ingestDef = ingestDefinitionEditorState.ingest;
  // the views Cube can open to edit (Edit MatView, PLAN §11.18)
  const materializedViews = getIngestMaterializedViews(ingestDef);
  const isValidForLineage = ingestDefinitionEditorState.validForLineageViewer;
  const selectedTab = ingestDefinitionEditorState.selectedTab;

  const sidebarTabs = [
    {
      label: INGEST_DEFINITION_TAB.DEFINITION,
      icon: <EyeIcon />,
    },
    {
      label: INGEST_DEFINITION_TAB.TESTING,
      icon: <FlaskIcon />,
    },
  ];

  useEffect(() => {
    ingestDefinitionEditorState.generateElementGrammar();
  }, [ingestDefinitionEditorState]);

  useApplicationNavigationContext(
    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.INGEST_DEFINITION_EDITOR,
  );

  const viewLineage = () => {
    const firstMatViewQuery =
      ingestDefinitionEditorState.ingest
        .TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.[0];
    if (firstMatViewQuery) {
      flowResult(
        ingestDefinitionEditorState.generateLineage(firstMatViewQuery),
      ).catch(editorStore.applicationStore.alertUnhandledError);
    } else {
      editorStore.applicationStore.notificationService.notifyError(
        'No MatView datasets available for lineage generation',
      );
    }
  };

  const viewSQL = () => {
    if (
      ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS
        ?.length
    ) {
      flowResult(ingestDefinitionEditorState.generateArtifact()).catch(
        editorStore.applicationStore.alertUnhandledError,
      );
    } else {
      editorStore.applicationStore.notificationService.notifyError(
        'No MatView datasets available for artifact generation',
      );
    }
  };

  return (
    <div className="ingest-definition-editor">
      <div className="panel">
        <PanelHeader
          title="Ingest"
          titleContent={ingestDef.name}
          darkMode={true}
          isReadOnly={true}
        />
        <div className="panel ingest-definition-editor__content-panel">
          <div className="ingest-definition-editor__activity-bar">
            <div className="ingest-definition-editor__activity-bar__items">
              {sidebarTabs.map((activity) => (
                <button
                  key={activity.label}
                  className={clsx(
                    'ingest-definition-editor__activity-bar__item',
                    {
                      'ingest-definition-editor__activity-bar__item--active':
                        selectedTab === activity.label,
                    },
                  )}
                  onClick={() =>
                    ingestDefinitionEditorState.setSelectedTab(activity.label)
                  }
                  tabIndex={-1}
                  title={activity.label}
                >
                  {activity.icon}
                  {activity.label}
                </button>
              ))}
            </div>
          </div>
          <div className="panel ingest-definition-editor__main-panel">
            {selectedTab === INGEST_DEFINITION_TAB.DEFINITION && (
              <PanelContent>
                <PanelHeader title="deployment" darkMode={true}>
                  <PanelHeaderActions>
                    <div className="panel__header__actions">
                      <div className="btn__dropdown-combo btn__dropdown-combo--primary">
                        <button
                          className="btn__dropdown-combo__label"
                          onClick={viewLineage}
                          tabIndex={-1}
                          disabled={!isValidForLineage}
                        >
                          <EyeIcon className="btn__dropdown-combo__label__icon" />
                          <div className="btn__dropdown-combo__label__title">
                            Lineage
                          </div>
                        </button>
                      </div>
                      {isValidForLineage && (
                        <div className="btn__dropdown-combo btn__dropdown-combo--primary">
                          <button
                            className="btn__dropdown-combo__label"
                            onClick={viewSQL}
                            tabIndex={-1}
                            disabled={
                              ingestDefinitionEditorState
                                .artifactGenerationState.isInProgress
                            }
                          >
                            <SQLIcon className="btn__dropdown-combo__label__icon" />
                            <div className="btn__dropdown-combo__label__title">
                              {ingestDefinitionEditorState
                                .artifactGenerationState.isInProgress
                                ? 'Generating...'
                                : 'View SQL'}
                            </div>
                          </button>
                        </div>
                      )}
                      {/* sized to its label, longer than the other buttons' */}
                      <div className="btn__dropdown-combo btn__dropdown-combo--primary !w-auto">
                        <button
                          className="btn__dropdown-combo__label !w-auto"
                          onClick={() =>
                            editorStore.embeddedCubeState.open(ingestDef)
                          }
                          tabIndex={-1}
                          disabled={ingestDefinitionEditorState.isReadOnly}
                          title="Build a materialized view of the project's ingest data sets in Legend Cube"
                        >
                          <CubeIcon className="btn__dropdown-combo__label__icon" />
                          <div className="btn__dropdown-combo__label__title whitespace-nowrap pr-2">
                            Create MatView
                          </div>
                        </button>
                        {materializedViews.length > 0 && (
                          <ControlledDropdownMenu
                            className="btn__dropdown-combo__dropdown-btn"
                            title="Edit a materialized view with Cube"
                            disabled={ingestDefinitionEditorState.isReadOnly}
                            content={
                              <MenuContent>
                                {materializedViews.map(({ name }) => (
                                  <MenuContentItem
                                    key={name}
                                    className="btn__dropdown-combo__option"
                                    onClick={() =>
                                      editorStore.embeddedCubeState.open(
                                        ingestDef,
                                        name,
                                      )
                                    }
                                  >
                                    {`Edit MatView ${name}`}
                                  </MenuContentItem>
                                ))}
                              </MenuContent>
                            }
                            menuProps={{
                              anchorOrigin: {
                                vertical: 'bottom',
                                horizontal: 'right',
                              },
                              transformOrigin: {
                                vertical: 'top',
                                horizontal: 'right',
                              },
                            }}
                          >
                            <CaretDownIcon />
                          </ControlledDropdownMenu>
                        )}
                      </div>
                    </div>
                  </PanelHeaderActions>
                </PanelHeader>
                <PanelLoadingIndicator
                  isLoading={
                    ingestDefinitionEditorState.artifactGenerationState
                      .isInProgress ||
                    ingestDefinitionEditorState.lineageGenerationState
                      .isInProgress
                  }
                />
                <PanelContent>
                  <CodeEditor
                    inputValue={ingestDefinitionEditorState.textContent}
                    isReadOnly={true}
                    language={CODE_EDITOR_LANGUAGE.PURE}
                  />
                </PanelContent>
                <IngestLineageModal
                  ingestDefinitionEditorState={ingestDefinitionEditorState}
                />
                <IngestionDefinitionArtifactViewer
                  artifact={ingestDefinitionEditorState.ingestionArtifact}
                  onClose={() =>
                    ingestDefinitionEditorState.setIngestionArtifact(undefined)
                  }
                  darkMode={
                    !editorStore.applicationStore.layoutService
                      .TEMPORARY__isLightColorThemeEnabled
                  }
                />
              </PanelContent>
            )}
            {selectedTab === INGEST_DEFINITION_TAB.TESTING && (
              <IngestTestableEditor
                testableState={ingestDefinitionEditorState.ingestTestableState}
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
});