import React from 'react';
import { Form, Radio, Alert, Input } from 'antd';
import { locales } from '@pisell/utils';
import OptionsTable from "./OptionTable";
import DataSourceTreeSelect from "../DataSourceTreeSelect";
import "./index.less";
var TextArea = Input.TextArea;
var optionSourceTypeOptions = [{
  title: 'registry.optionDataSource.type.default-label',
  description: 'registry.optionDataSource.type.default-desc',
  value: 'default'
}, {
  title: 'registry.optionDataSource.type.api-label',
  description: 'registry.optionDataSource.type.api-desc',
  value: 'api'
}, {
  title: 'registry.optionDataSource.type.custom-label',
  description: 'registry.optionDataSource.type.custom-desc',
  value: 'custom'
}];
var OptionDataSource = function OptionDataSource(_ref) {
  var form = _ref.form,
    treeDataSource = _ref.treeDataSource;
  var type = Form.useWatch(['xDataSource', 'type'], form);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
    name: ['xDataSource', 'type'],
    label: locales.getText('registry.optionDataSource.type.title'),
    rules: [{
      required: true,
      message: locales.getText('registry.optionDataSource.type.desc')
    }]
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-settings-registry-option-source-type-options-desc"
  }, locales.getText('registry.optionDataSource.type.desc')), /*#__PURE__*/React.createElement("div", {
    className: "pisell-settings-registry-option-source-type-options"
  }, optionSourceTypeOptions.map(function (option) {
    return /*#__PURE__*/React.createElement(Radio, {
      key: option.value,
      value: option.value
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block'
      }
    }, /*#__PURE__*/React.createElement("div", null, locales.getText(option.title)), /*#__PURE__*/React.createElement("div", {
      style: {
        fontSize: '12px',
        color: '#8c8c8c',
        marginTop: '2px'
      }
    }, locales.getText(option.description))));
  })))), type === 'default' && /*#__PURE__*/React.createElement(Form.Item, {
    name: ['xDataSource', 'options'],
    label: locales.getText('registry.optionDataSource.options.label'),
    validateTrigger: ['onSubmit', 'onChange'],
    rules: [{
      required: true,
      validator: function validator(_, value) {
        // 检查是否有值
        if (!value || !Array.isArray(value) || value.length === 0) {
          return Promise.reject(new Error(locales.getText('registry.optionDataSource.options.empty')));
        }

        // 检查每一项是否都有 label 和 value
        for (var i = 0; i < value.length; i++) {
          var item = value[i];
          if (!item.label || !item.value || !item.value.trim()) {
            return Promise.reject(new Error(locales.getText('registry.optionDataSource.options.required-desc')));
          }
        }
        return Promise.resolve();
      }
    }]
  }, /*#__PURE__*/React.createElement(OptionsTable, null)), type === 'api' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
    name: ['xDataSource', 'dataSource'],
    label: locales.getText('registry.optionDataSource.api.dataSource-label'),
    rules: [{
      required: true,
      validator: function validator(_, value) {
        if (!value || !(value !== null && value !== void 0 && value.key) && !(value !== null && value !== void 0 && value.tableName)) {
          return Promise.reject(new Error(locales.getText('registry.optionDataSource.api.dataSource-required')));
        }
        return Promise.resolve();
      }
    }]
  }, /*#__PURE__*/React.createElement(DataSourceTreeSelect, {
    mode: "list",
    filters: {
      tables: 'all',
      variables: {}
    },
    dataSource: treeDataSource
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: ['xDataSource', 'extraParams'],
    label: locales.getText('registry.optionDataSource.api.extraParams-label'),
    rules: [{
      validator: function validator(_, value) {
        // 支持空值时跳过验证
        if (!value || value.trim() === '') {
          return Promise.resolve();
        }
        try {
          JSON.parse(value);
          return Promise.resolve();
        } catch (error) {
          return Promise.reject(new Error(locales.getText('registry.message.uiSchema.invalid')));
        }
      }
    }]
  }, /*#__PURE__*/React.createElement(TextArea, {
    placeholder: locales.getText('registry.optionDataSource.api.extraParams-label'),
    rows: 6,
    style: {
      fontFamily: 'monospace'
    }
  }))), type === 'custom' && /*#__PURE__*/React.createElement(Alert, {
    type: "warning",
    showIcon: true,
    message: locales.getText('registry.optionDataSource.type.custom.warning-title'),
    description: locales.getText('registry.optionDataSource.type.custom.warning-description'),
    className: "pisell-settings-registry-option-custom-alert"
  }));
};
export default OptionDataSource;