//Code from https://github.com/gapitio/gapit-htmlgraphics-panel
import React from 'react';
import { StandardEditorProps } from '@grafana/data';
import { CodeEditor, useTheme } from '@grafana/ui';
import AutoSizer from 'react-virtualized-auto-sizer';
import { css } from 'emotion';

interface Props extends StandardEditorProps<string, any, any> {}

export const PanelOptionCode: React.FC<Props> = ({ value, item, onChange }) => {
  if (typeof value !== 'string') {
    value = JSON.stringify(value, null, 2);
  }
  const theme = useTheme();
  return (
    <AutoSizer
      disableHeight
      className={css`
        margin-bottom: ${theme.spacing.sm};
      `}
    >
      {({ width }) => (
        <CodeEditor
          language={item.settings?.language}
          showLineNumbers={item.settings?.language === 'javascript' ? true : false}
          value={value === 'null' ? JSON.stringify(item.settings?.initValue, null, 2) : value}
          width={width}
          height="200px"
          onBlur={(code) => {
            if (item.settings?.language === 'json' && code) {
              code = JSON.parse(code);
            }
            onChange(code);
          }}
        />
      )}
    </AutoSizer>
  );
};