import { useState } from 'react';

import { t } from '@grafana/i18n';
import { reportInteraction } from '@grafana/runtime';
import { DataQuery } from '@grafana/schema';
import { Button } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { useDispatch, useSelector } from 'app/types/store';

import { useQueryLibraryContext } from '../QueryLibrary/QueryLibraryContext';
import { changeQueries } from '../state/query';
import { selectExploreDSMaps } from '../state/selectors';

type Props = {
  query: DataQuery;
};

export const RichHistoryAddToLibrary = ({ query }: Props) => {
  const [hasBeenSaved, setHasBeenSaved] = useState(false);
  const { openDrawer, queryLibraryEnabled } = useQueryLibraryContext();
  const dispatch = useDispatch();
  const exploreActiveDS = useSelector(selectExploreDSMaps);
  const exploreId = exploreActiveDS.exploreToDS[0]?.exploreId;

  const onSelectQuery = (newQuery: DataQuery) => {
    reportInteraction('grafana_explore_query_replaced_from_library');
    if (exploreId) {
      dispatch(changeQueries({ exploreId, queries: [newQuery] }));
    }
  };

  const buttonLabel = t('explore.rich-history-card.add-to-library', 'Save query');

  if (!contextSrv.isEditor) {
    return null;
  }

  return queryLibraryEnabled && !hasBeenSaved ? (
    <>
      <Button
        variant="secondary"
        aria-label={buttonLabel}
        onClick={() => {
          openDrawer({
            query,
            onSelectQuery,
            options: {
              onSave: () => {
                setHasBeenSaved(true);
              },
              context: 'rich-history',
            },
          });
        }}
      >
        {buttonLabel}
      </Button>
    </>
  ) : null;
};
