import { FetchDataTable, ButtonGroup} from '@bigorange/ui';

export default (props) => {
  return (
    <>
      <ButtonGroup
        direction="horizontal"
        source=[
          { label: 'Button1', key: 'Button1', clickedButtonStyle: { type: "dashed" } },
          { label: 'Button2', key: 'Button2', antdButtonProps: { type: 'link' }, clickedButtonStyle: { type: "dashed" } },
        ]
        onClick={(config => console.log(config))}
      />
      <FetchDataTable
        columns={...}
        fetchDataFunc={(pagination, filters, sorter) => Promise.resolve({ data: ..., pageSize: ..., current: ..., total: ... })}
        onGetData={data => { console.log("data: ", data) }}
      />
    </>
  )
}

{
  key: string | number,
  dataIndex: string | number,
  title: string | number | JSX.Element,
  render?: (test: string, record: Dict) => string | number | JSX.Element,
}[]

// Antd Table onChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
(pagination, filters, sorter, ...resetAntdTableOnChangeParams) => Promise<
  current: string | number;
  pageSize: string | number;
  total: string | number;
  data: any;
>

(data) => void

import React, { useRef } from 'react';

const myRef = useRef();

// doQuery: (antdTableChangeParams?: Dict) => void;
// Antd Table OnChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
<FetchDataTable
  ...
  ref={ myRef } // then you can trigger the `fetchDataFunc` by 'myRef.current.doQuery()'
  ...
/>

<FetchDataTable
  ...
  disableInitialQuery
  ...
/>

<FetchDataTable
  ...
  disableOnChangeQuery
  ...
/>

<FetchDataTable
  ...
  antdTableProps: { size: "small" }
  ...
/>

(label, key) => {}

import React, { useRef } from 'react';
import { Button } from 'ant';
import { ConfigTable } from '@bigorange/ui';

export default (props) => {
  const currentRef = useRef();
  return (
    <>
      <Button
        onClick={() => { currentRef.current.doQuery(); }}
      >
        Do Query
      <Button/>
      <ConfigTable
        config={...}
        fetchDataFunc={(pagination, filters, sorter) => Promise.resolve({ data: ..., pageSize: ..., current: ..., total: ... })}
        onGetData={data => { console.log("data: ", data) }}
        ref={currentRef}
      />
    </>
  )
}

{
  columns: {
    key: any;
    dataIndex: string;
    title: string | reactNode;
    render: (text: string, record: object) => reactNode;
  } // the antd Table columns
  disableOnChangeQuery?: boolean; // the FetchDataTable disableOnChangeQuery
  disableInitialQuery?: boolean; // disable query when didmount
  component?: reactNode; // customzed component
}

// Antd Table OnChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
(pagination, filters, sorter, ...resetAntdTableOnChangeParams) => Promise<
  current: string | number;
  pageSize: string | number;
  total: string | number;
  data: any;
>

(data) => void

<ConfigTable
  ...
  antTableProps: { size: "small" }
  ...
/>

<ConfigTable
  ...
  customProps: { xxx: ... }
  ...
/>

import { QueryGroup } from '@bigorange/ui';
import moment from 'moment';

const startMoment = moment().subtract(1, 'years');
const endMoment = moment();

// the QueryGroup Config
const config = [
  {
    label: 'Name',
    name: "name",
    type: 'Input',
    rules: [
      {
        required: true,
        message: 'Please input name!',
      },
    ],
    initialValue: 'Orange'
  },
  {
    label: 'Phone',
    name: "phone",
    type: 'Input',
    rules: [
      {
        required: true,
        message: 'Please input phone!',
      },
    ],
  },
  {
    label: 'Fruits',
    name: "fruits",
    type: 'Select',
    options: [
      {
        label: 'Orange',
        value: 'orange',
      },
      {
        label: 'Apple',
        value: 'apple',
      },
      {
        label: 'Mango',
        value: 'mango'
      },
    ],
    initialValue: 'orange',
  },
  {
    label: 'Start Date',
    name: 'start',
    type: 'DatePicker',
    rules: [
      {
        required: true,
        message: '请输入开始日期!',
      },
    ],
    format: 'YYYY-MM-DD',
  },
  {
    label: 'Month',
    name: 'month',
    type: 'DatePicker',
    rules: [
      {
        required: true,
        message: '请选择月份!',
      },
    ],
    format: 'YYYY-MM',
    antdDataEntryProps: {
      picker: 'month',
    },
  },
  {
    label: '创建时间',
    type: 'RangePicker',
    rangeNames: ['startTime', 'endTime'], // default name: "startTime-endTime"
    initialValue: [startMoment, endMoment],
  },
  {
    label: '是否上天',
    name: 'upSky',
    type: 'Checkbox',
    initialValue: true,
  },
  {
    label: '左青龙右白虎',
    name: 'godAnimal',
    type: 'Checkbox.Group',
    options: [
      { label: '青龙', value: 'green dragon' },
      { label: '白虎', value: 'white tiger' },
    ],
    initialValue: [],
  },
  {
    label: '自定义输入框',
    name: 'coolNumber',
    type: CustomerInput, // your customized form control
    initialValue: 111,
  },
]

export default (props) => {
  return (
    <>
      <Button
        onClick={() => {
          ref.current?.doValidate().then(r => {
            if (r) {
              console.log(r);
              ref.current?.resetFields(); // or ref.current?.form.resetFields();
              
            }
          })
        }}
      >
        查询
      </Button>
      <QueryGroup
        source={config}
        onValidate={(values: Dict) => {
          console.log("values: ", values)
          return "good";
        }}
        queryComp={<a>click to query</a>} // or queryComp={null}
        initialValues={{ name: 'a cool name', phone: '123' }}
        ref={ref}
        onChange={(changedValues, allValues) => { console.log('onChange', changedValues, allValues) }}
        okText="customer ok text"
        resetText="customer reset fields text"
        okButtonAntdProps={{ type: 'primary' }} // antd Button props of ok button 
        resetButtonAntdProps={{ size: 'large' }} // antd Button props of reset button 
        extra={<Input palceholder="customer componet at the end"/>}
      />
    </>
  )
}

{
  type: 'InputNumber' | 'Input' | 'DatePicker' | 'DatePicker' | 'RangePicker' | JSX.Element; // it's value could be your customized form control
  name: string; // it's not required for "RangePicker"
  label: string;
  options?: { value: any; label: string }[];
  initialValue?: any;
  rules?: {[key: string]: any}; // antd form api "rules"
  style?: Dict;
  rangeNames?: string[];
  antdDataEntryProps?: {[key: string]: any}; // antd Data Entry Components' Props
  format?: string; // the data format, eg. 'YYYY-MM-DD HH:mm:ss'
}

  <QueryGroup
    ...
    antdFormProps={{ layout: 'vertical' }}
    ...
  />

ref.current: { doValidate: () => Promise<any>; form: FormInstance },