import React, { useState, useEffect } from 'react';
import isEqual from 'lodash/isEqual';
import { Input, EasyNumber } from '@easyv/react-gui';
import { Divider } from '@easyv/antd';
import { DataTableConfig } from 'models/component.types';
import styles from './DTable.less';
import message from '@/components/message';

/* const methodOptions = [
  { name: 'GET', value: 'get' },
  { name: 'POST', value: 'post' },
  { name: 'PUT', value: 'put' },
  { name: 'DELETE', value: 'delete' },
  { name: 'PATCH', value: 'patch' }
]; */

const DTable = ({
  dataConfig = { data_id: '', table_id: '', view_id: '', max_records: 1000, method: '' },
  onChange,
}: {
  dataConfig: any;
  onChange: (config) => void;
}) => {
  const [dataId, setDataId] = useState('');
  const [tableID, setTableID] = useState('');
  const [viewID, setViewID] = useState('');
  const [records, setRecords] = useState(1000);
  const [method, setMethod] = useState('get');

  function isUpdate(value: string, prefix: string) {
    const reg = RegExp(`^(${prefix})[a-z|A-Z|0-9]{14}$`);
    return reg.test(value);
  }

  useEffect(() => {
    !isEqual(dataId, dataConfig.data_id) && setDataId(dataConfig.data_id || '');
    !isEqual(tableID, dataConfig.table_id) && setTableID(dataConfig.table_id || '');
    !isEqual(viewID, dataConfig.view_id) && setViewID(dataConfig.view_id || '');
    !isEqual(records, dataConfig.max_records) && setRecords(dataConfig.max_records || 1000);
  }, [dataConfig]);

  const updateDataConfig = (max_records?: DataTableConfig['max_records']) => {
    onChange({
      data: {
        data_id: dataId,
        table_id: tableID,
        view_id: viewID,
        max_records: max_records || records,
        method,
      },
    });
  };

  const onBlurTableID: React.FocusEventHandler<HTMLInputElement> = (e) => {
    const t = e.target.value.trim();
    if (dataConfig.table_id !== t) {
      if (isUpdate(t, 'tbl')) {
        updateDataConfig();
      } else {
        message.error('请输入正确的TableID');
        setTableID(dataConfig.table_id);
      }
    }
  };

  const onBlurViewID: React.FocusEventHandler<HTMLInputElement> = (e) => {
    const v = e.target.value.trim();
    if (dataConfig.view_id !== v) {
      if (!v || isUpdate(v, 'viw')) {
        updateDataConfig();
      } else {
        message.error('请输入正确的ViewID');
        setViewID(dataConfig.view_id);
      }
    }
  };

  const handleTableID: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    const value = e.target.value.trim();
    setTableID(value);
  };

  const handleViewID: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    const value = e.target.value.trim();
    setViewID(value);
  };

  const handleRecords = (value: number) => {
    setRecords(value);
    updateDataConfig(value);
  };

  return (
    <div className={styles.dtableApiContainer}>
      <div className={styles.dtableApiWrap}>
        <label className={styles.label}>TableID</label>
        <div style={{ flex: 1 }}>
          <Input
            value={tableID}
            maxLength="20"
            onChange={handleTableID}
            onBlur={onBlurTableID}
            placeholder="请输入TableID"
          />
        </div>
      </div>
      <div className={styles.dtableApiWrap}>
        <div className={styles.label}>ViewID</div>
        <div style={{ flex: 1 }}>
          <Input
            value={viewID}
            maxLength="20"
            onChange={handleViewID}
            onBlur={onBlurViewID}
            placeholder="请输入ViewID（选填）"
          />
        </div>
      </div>
      <div className={styles.dtableApiWrap}>
        <div className={styles.label}>Records</div>
        <div style={{ flex: 1 }}>
          <EasyNumber
            min={1}
            value={records}
            onChange={handleRecords}
            placeholder="请输入Records"
          />
        </div>
      </div>
      <Divider style={{ background: '#393B4A', margin: '0' }} />
    </div>
  );
};

export default DTable;
