import React, { useContext, useEffect } from 'react';
import JsonView from '@uiw/react-json-view';
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';
import { Row, Col, Typography } from 'antd';
import PageContext from '../contexts/page';
import ReactSimpleCodeEditor from './ReactSimpleCodeEditor';
import { LS_IS_DARK_THEME } from '../constants';

// Use `Typography` so can apply dark theme to text
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const {
  Text
} = Typography;
const defaultCode = 'return rows.slice(0, 10);';
export default function QueryPage() {
  const {
    dbName,
    tableName,
    githubDb
  } = useContext(PageContext);
  const [code, setCode] = React.useState(defaultCode);
  const [result, setResult] = React.useState({
    obj: '',
    err: ''
  });
  const [content, setContent] = React.useState([]);
  useEffect(() => {
    githubDb?.getTableRows(dbName, tableName).then(response => {
      setContent(response.content);
    });
  }, []);
  useEffect(() => {
    try {
      // eslint-disable-next-line no-new-func
      const fn = Function('rows', code);
      const output = fn(content);
      setResult({
        obj: JSON.stringify(output),
        err: ''
      });
    } catch (err) {
      // console.log('[ERROR] Failed to eval function!');

      setResult({
        obj: '',
        err: err.message
      });
    }
  }, [content, code]);
  return /*#__PURE__*/_jsx("div", {
    className: "dbm-query-page",
    children: /*#__PURE__*/_jsxs(Row, {
      children: [/*#__PURE__*/_jsxs(Col, {
        span: 16,
        children: ["Code:", /*#__PURE__*/_jsx(ReactSimpleCodeEditor, {
          height: "50em",
          value: code,
          onChange: setCode
        }), /*#__PURE__*/_jsx("br", {})]
      }), /*#__PURE__*/_jsxs(Col, {
        span: 8,
        children: [/*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsx(Text, {
            children: "Error:"
          })
        }), /*#__PURE__*/_jsx("div", {
          style: {
            color: 'red'
          },
          children: result.err
        }), /*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsx(Text, {
            children: "Result:"
          })
        }), result.obj && /*#__PURE__*/_jsx(JsonView, {
          value: JSON.parse(result.obj),
          collapsed: 1,
          style: localStorage.getItem(LS_IS_DARK_THEME) === 'true' ? darkTheme : lightTheme
        })]
      })]
    })
  });
}
//# sourceMappingURL=QueryPage.js.map