import BaseIndex from '@/components/Base/BaseIndex';
import BaseSearch from '@/components/Base/BaseSearch';
import BaseTable from '@/components/Base/BaseTable';
import { _getStationList, _syncData } from '@/services/station';
import Helper from '@/util/searchHelper';
import { ActionType } from '@ant-design/pro-components';
import { Button, message, Modal, Tooltip } from 'antd';
import { useRef, useState } from 'react';
import { StationTableColumns } from './columns';
export default function Index() {
  /**********************************狀態管理**********************************/

  const actionRef = useRef<ActionType>();
  const [searchKey, setSearchKey] = useState('');
  const [doubleCheckModalOpen, setDoubleCheckModalOpen] = useState(false);

  /**********************************狀態管理**********************************/
  /**********************************組件初始化**********************************/
  const DoubleCheckModal = () => {
    return (
      <Modal
        open={doubleCheckModalOpen}
        title="確認同步數據"
        centered
        onCancel={() => setDoubleCheckModalOpen(false)}
        onOk={async () => {
          await _syncData();
          actionRef.current?.reload();
          message.success('同步數據成功');
          setDoubleCheckModalOpen(false);
        }}
      >
        <h1>是否確認同步數據？</h1>
      </Modal>
    );
  };
  /**********************************組件初始化**********************************/
  /**********************************異步函數**********************************/

  /**********************************異步函數**********************************/
  return (
    <div>
      <DoubleCheckModal />
      <BaseIndex title="Station page">
        <BaseSearch
          title="Search bar"
          submitFun={actionRef.current?.reload}
          inputProps={{
            value: searchKey,
            onChange: ({ currentTarget: { value } }) => setSearchKey(value),
          }}
        />
        <BaseTable<Page_Station.Station>
          searchKey={searchKey}
          props={{
            headerTitle: 'Station List',
            actionRef: actionRef,
            toolBarRender: () => [
              <Tooltip
                key="syncData"
                title={
                  <>
                    <h1>請在以下情況下同步數據</h1>
                    <h2>
                      1.
                      充電站信息有變動。例如：增加新的充電站，減少已有充電站，站內新增或減少樁槍設施等
                    </h2>
                    <h2>2. 已確認設施提供方成功更新數據</h2>
                  </>
                }
              >
                <Button type="primary" key="syncData" onClick={() => setDoubleCheckModalOpen(true)}>
                  同步數據
                </Button>
              </Tooltip>,
            ],
            columns: StationTableColumns({
              mainTableReload: () => actionRef.current?.reload(),
            }),
            request: async () => {
              const dataSource = await _getStationList();
              console.log('dataSource', dataSource);
              if (searchKey) {
                dataSource.data = Helper<Page_Station.Station>({
                  dataSource: dataSource.data,
                  keyWord: searchKey,
                }) as Page_Station.Station[];

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