import { useEffect, useState } from 'react';
import { AppTable } from '../../components/AppTable/AppTable';
import { useStore } from '../../stores/StoreProvider';
import { observer } from 'mobx-react-lite';
import { columnOPCUA } from '../../mock/dataAssets';
import { Button, Popover, Switch } from 'antd';
import { DeleteFilled, PlusOutlined } from '@ant-design/icons';
import { NavLink } from 'react-router-dom';
import { IAssetsTable } from '../../types/default';

export const TableSyslog = observer(() => {
  const { assetsUiStore: uiStore } = useStore();

  const [state, setState] = useState<IAssetsTable>({
    selectedRowKeys: [],
    loading: false,
    pagination: {
      current: '1',
      pageSize: 10,
      total: 10,
    },
  });

  useEffect(() => {
    setState({
      ...state,
      pagination: {
        ...state.pagination,
        total: uiStore.list.length,
      },
    });
    uiStore.loadingList(state.pagination.current);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const start = (): void => {
    setState({ ...state, loading: true });
    setTimeout(() => {
      setState({ ...state, selectedRowKeys: [], loading: false });
    }, 1000);
  };

  const onSelectChange = (selectedRowKeys: any): void => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setState({ ...state, selectedRowKeys });
  };

  const handleTableChange = (pagination: any): void => {
    setState({ ...state, loading: true });
    setTimeout(() => {
      setState({
        ...state,
        pagination,
        loading: false,
      });
    }, 1000);
  };
  const onSearch = (value: any): void => console.log(value);

  const { loading, selectedRowKeys, pagination } = state;
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = state.selectedRowKeys.length > 0;

  const newData = uiStore.list.map((item: any) => ({
    ...item,
    title: <NavLink to={`/assets/${item.id}`}>{item.title}</NavLink>,
  }));

  return (
    <div>TableSyslog</div>
    // <>
    //   <AppTable
    //     actions={
    //       <Popover placement="topLeft" content="Add new receirver">
    //         <PlusOutlined style={{ color: '#1890ff', marginLeft: '1em' }} />
    //       </Popover>
    //     }
    //     seleactedActions={
    //       <>
    //         <Popover
    //           placement="topLeft"
    //           content="Toggle event export for selected receirvers"
    //         >
    //           <Switch
    //             style={{ marginLeft: '1em' }}
    //             defaultChecked
    //             size="small"
    //           />
    //         </Popover>
    //         <Popover content="Delete">
    //           <Button
    //             type="link"
    //             onClick={start}
    //             disabled={!hasSelected}
    //             // loading={loading}
    //           >
    //             <DeleteFilled />
    //           </Button>
    //         </Popover>
    //       </>
    //     }
    //     rowSelection={rowSelection}
    //     columns={columnOPCUA}
    //     dataSource={newData}
    //     pagination={pagination}
    //     loading={loading}
    //     onSearch={onSearch}
    //     onChange={handleTableChange}
    //   />
    // </>
  );
});
