import { css } from '@emotion/css';
import Prism from 'prismjs';
import React, { useEffect } from 'react';

import { type GrafanaTheme2 } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/plugin-ui';
import { Button, useStyles2 } from '@grafana/ui';

import 'prismjs/components/prism-kusto';
import 'prismjs/themes/prism-tomorrow.min.css';

interface KQLPreviewProps {
  query: string;
  hidden: boolean;
  setHidden: React.Dispatch<React.SetStateAction<boolean>>;
}

const KQLPreview: React.FC<KQLPreviewProps> = ({ query, hidden, setHidden }) => {
  const styles = useStyles2(getStyles);

  useEffect(() => {
    Prism.highlightAll();
  }, [query]);

  return (
    <EditorRow>
      <EditorFieldGroup>
        <EditorField label={t('components.kql-preview.label-query-preview', 'Query Preview')}>
          <>
            <Button hidden={!hidden} variant="secondary" onClick={() => setHidden(false)} size="sm">
              <Trans i18nKey="components.kql-preview.button-show">Show</Trans>
            </Button>
            <div className={styles.codeBlock} hidden={hidden}>
              <pre className={styles.code}>
                <code className="language-kusto">{query}</code>
              </pre>
            </div>
            <Button hidden={hidden} variant="secondary" onClick={() => setHidden(true)} size="sm">
              <Trans i18nKey="components.kql-preview.button-hide">Hide</Trans>
            </Button>
          </>
        </EditorField>
      </EditorFieldGroup>
    </EditorRow>
  );
};

const getStyles = (theme: GrafanaTheme2) => {
  return {
    codeBlock: css({
      width: '100%',
      display: 'table',
      tableLayout: 'fixed',
    }),
    code: css({
      marginBottom: '4px',
    }),
  };
};

export default KQLPreview;
