/* eslint-disable react/prop-types */

import React, { useContext } from 'react';
import { Table, Tabs, Tooltip } from 'antd';
import { useLocation } from 'react-router-dom';
import PageContext from '../contexts/page';
import ReactSimpleCodeEditor from './ReactSimpleCodeEditor';
import { DB_CFG_FILENAME, LS_KEY_GITHUB_OWNER, LS_KEY_GITHUB_REPO_NAME, LS_KEY_GITHUB_REPO_PATH, STRING_ARRAY, TYPE_CREATE_UPDATE_PAGE, TYPE_GET_PAGE } from '../constants';
import { TABLE_COLUMN_KEYS } from '../types/DbColumn';
import { Link } from 'react-router-dom';
import DistinctColumn from './DistinctColumn';
import ComponentDemoModal from './ComponentDemoModal';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const genColumn = (dbName, dbTableColumns) => [{
  key: 'id',
  dataIndex: 'id',
  title: 'id',
  fixed: 'left',
  width: 150,
  render: cell => {
    // if this column is string_array, then render a link "?distinct=tags"
    if (dbTableColumns.find(col => col.id === cell && col.type === STRING_ARRAY)) {
      return /*#__PURE__*/_jsx(Tooltip, {
        title: `This column type is STRING_ARRAY, will show all ${cell} distinct count. Click to view.`,
        children: /*#__PURE__*/_jsx(Link, {
          to: `?distinct=${cell}`,
          children: cell
        })
      });
    }
    return cell;
  }
}, {
  key: 'name',
  dataIndex: 'name',
  title: 'name',
  width: 150
}, {
  key: 'type',
  dataIndex: 'type',
  title: 'type',
  width: 150
}, {
  key: 'primary',
  dataIndex: 'primary',
  title: 'primary',
  width: 100,
  render: cell => cell === true ? 'Yes' : 'No'
}, {
  key: 'referenceTable',
  dataIndex: 'referenceTable',
  title: 'referenceTable',
  render: referenceTableName => {
    if (!referenceTableName) {
      return '';
    }
    return /*#__PURE__*/_jsx(Link, {
      to: `/${dbName}/${referenceTableName}/list`,
      children: referenceTableName
    });
  }
}, {
  key: 'ui:listPage:isFilter',
  dataIndex: 'ui:listPage:isFilter',
  title: 'ui:listPage:isFilter',
  width: 170,
  render: cell => cell === true ? 'Yes' : 'No'
}, {
  key: 'ui:createUpdatePage:enum',
  dataIndex: 'ui:createUpdatePage:enum',
  title: 'ui:createUpdatePage:enum',
  render: cell => {
    if (!cell) return 'None';
    return cell.join(', ');
  }
}, {
  key: 'ui:createUpdatePage:placeholder',
  dataIndex: 'ui:createUpdatePage:placeholder',
  title: 'ui:createUpdatePage:placeholder'
}, {
  key: TYPE_CREATE_UPDATE_PAGE,
  dataIndex: TYPE_CREATE_UPDATE_PAGE,
  title: TYPE_CREATE_UPDATE_PAGE,
  render: renderArg => {
    return !renderArg ? '' : /*#__PURE__*/_jsx(ComponentDemoModal, {
      renderArg: renderArg
    });
  }
}, {
  key: TYPE_GET_PAGE,
  dataIndex: TYPE_GET_PAGE,
  title: TYPE_GET_PAGE,
  render: renderArg => {
    return !renderArg ? '' : /*#__PURE__*/_jsx(ComponentDemoModal, {
      renderArg: renderArg
    });
  }
}, {
  key: 'ui:listPage:randomView',
  dataIndex: 'ui:listPage:randomView',
  title: 'ui:listPage:randomView',
  render: cell => {
    if (typeof cell === 'object') return JSON.stringify(cell);
    return cell;
  }
}, {
  key: 'ui:listPage:isImageViewKey',
  dataIndex: 'ui:listPage:isImageViewKey',
  title: 'ui:listPage:isImageViewKey',
  render: cell => cell === true ? 'Yes' : 'No'
}];
const footer = ({
  dbName
}) => function TableFooter() {
  return /*#__PURE__*/_jsxs("div", {
    children: ["Table column definition:", ' ', /*#__PURE__*/_jsx("a", {
      href: `https://github.com/${localStorage.getItem(LS_KEY_GITHUB_OWNER)}/${localStorage.getItem(LS_KEY_GITHUB_REPO_NAME)}/blob/main/${localStorage.getItem(LS_KEY_GITHUB_REPO_PATH)}/${dbName}/${DB_CFG_FILENAME}`,
      target: "_blank",
      rel: "noreferrer",
      children: DB_CFG_FILENAME
    })]
  });
};
const checkValidTableColumns = dbTableColumns => {
  let msg = '';
  if (dbTableColumns.length === 0) {
    msg += 'No columns defined in the table. ';
  }
  dbTableColumns.forEach(col => {
    // check every properties of col, should in this list TABLE_COLUMN_KEYS
    Object.keys(col).forEach(key => {
      if (TABLE_COLUMN_KEYS.indexOf(key) < 0) {
        msg += `Invalid key: ${key} in column: ${col.id}. `;
      }
    });
  });
  return msg;
};
export default function TableConfigPage() {
  const {
    dbName,
    columns: dbTableColumns
  } = useContext(PageContext);
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const distinctParam = queryParams.get('distinct');
  const errMsg = checkValidTableColumns(dbTableColumns);
  const items = [{
    key: 'table',
    label: 'Table',
    children: /*#__PURE__*/_jsxs("div", {
      children: [errMsg && /*#__PURE__*/_jsx("div", {
        children: errMsg
      }), /*#__PURE__*/_jsx(Table, {
        scroll: {
          x: 2300
        },
        rowKey: "id",
        dataSource: dbTableColumns,
        columns: genColumn(dbName, dbTableColumns),
        pagination: false,
        footer: footer({
          dbName
        })
      })]
    })
  }, {
    key: 'json',
    label: 'JSON',
    children: /*#__PURE__*/_jsx(ReactSimpleCodeEditor, {
      value: JSON.stringify(dbTableColumns, null, '  '),
      onChange: () => {}
    })
  }];
  if (distinctParam) {
    return /*#__PURE__*/_jsx("div", {
      className: "table-config-page",
      children: /*#__PURE__*/_jsx(DistinctColumn, {
        columnKey: distinctParam
      })
    });
  }
  return /*#__PURE__*/_jsx("div", {
    className: "table-config-page",
    children: /*#__PURE__*/_jsx(Tabs, {
      defaultActiveKey: "table",
      items: items
    })
  });
}
//# sourceMappingURL=TableConfigPage.js.map