import BaseIndex from '@/components/Base/BaseIndex';
import BaseSearch from '@/components/Base/BaseSearch';
import BaseTable from '@/components/Base/BaseTable';
import { PageParams } from '@/services/commonType';
import { _getCustomerList } from '@/services/customer';
import Helper from '@/util/searchHelper';
import { ActionType } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';
import { CustomerTableColumns } from './columns';
export default function Index() {
  /**********************************狀態管理**********************************/

  const actionRef = useRef<ActionType>();
  const [searchKey, setSearchKey] = useState('');
  const [reload, setReload] = useState(() => actionRef.current?.reload);
  useEffect(() => {
    setReload(() => actionRef.current?.reload);
    actionRef.current?.setPageInfo?.({
      current: 1,
      pageSize: 10,
    });
  }, [searchKey]);

  /**********************************狀態管理**********************************/
  /**********************************組件初始化**********************************/
  /**********************************組件初始化**********************************/
  /**********************************異步函數**********************************/

  /**********************************異步函數**********************************/
  return (
    <div>
      <BaseIndex title="Customer account page">
        <BaseSearch
          title="Search bar"
          submitFun={actionRef.current?.reload}
          inputProps={{
            value: searchKey,
            onChange: ({ currentTarget: { value } }) => setSearchKey(value),
          }}
        />
        <BaseTable<Page_Customer.CustomerTable>
          searchKey={searchKey}
          props={{
            headerTitle: 'Account List',
            actionRef: actionRef,

            columns: CustomerTableColumns({
              mainTableReload: reload,
            }),
            request: async (pageParams: PageParams) => {
              console.log('pageParams', pageParams);

              const dataSource = await _getCustomerList(pageParams, searchKey);
              console.log('dataSource', dataSource);
              if (searchKey) {
                dataSource.data = Helper<Page_Customer.CustomerTable>({
                  dataSource: dataSource.data,
                  keyWord: searchKey,
                }) as Page_Customer.CustomerTable[];

                return dataSource;
              } else {
                return dataSource;
              }
            },
          }}
        />
      </BaseIndex>
    </div>
  );
}
