import { useMemo } from 'react';

import { DataFrame, DataLinksContext, SplitOpen, TimeRange } from '@grafana/data';
import { t } from '@grafana/i18n';
import { PanelChrome } from '@grafana/ui';
import { StoreState, useSelector } from 'app/types/store';

import { useExploreDataLinkPostProcessor } from '../hooks/useExploreDataLinkPostProcessor';

import { TraceView } from './TraceView';
import { transformDataFrames } from './utils/transform';

interface Props {
  dataFrames: DataFrame[];
  splitOpenFn: SplitOpen;
  exploreId: string;
  scrollElement?: Element;
  timeRange: TimeRange;
}

export function TraceViewContainer(props: Props) {
  // At this point we only show single trace
  const frame = props.dataFrames[0];
  const { dataFrames, splitOpenFn, exploreId, scrollElement, timeRange } = props;
  const traceProp = useMemo(() => transformDataFrames(frame), [frame]);
  const datasource = useSelector(
    (state: StoreState) => state.explore.panes[props.exploreId]?.datasourceInstance ?? undefined
  );

  const dataLinkPostProcessor = useExploreDataLinkPostProcessor(splitOpenFn, timeRange);

  if (!traceProp) {
    return null;
  }

  return (
    <PanelChrome padding="none" title={t('explore.trace-view-container.title-trace', 'Trace')}>
      <DataLinksContext.Provider value={{ dataLinkPostProcessor }}>
        <TraceView
          exploreId={exploreId}
          dataFrames={dataFrames}
          splitOpenFn={splitOpenFn}
          scrollElement={scrollElement}
          traceProp={traceProp}
          datasource={datasource}
          timeRange={timeRange}
        />
      </DataLinksContext.Provider>
    </PanelChrome>
  );
}
