import { memo, useState } from 'react';
import { showConfirmModal } from '../../components/Modals/ConfirmModal/ConfirmModal';
import { Button, Popover } from 'antd';
import { DeleteFilled, FileFilled, SettingFilled } from '@ant-design/icons';
import { IAssetsTable } from '../../types/default';

function EventsJournalActions(props: any): JSX.Element {
  const [state, setState] = useState<IAssetsTable>({
    selectedRowKeys: [],
    loading: false,
    pagination: {
      current: '1',
      pageSize: 10,
      total: 10,
    },
  });

  const handleDelete = () => {
    console.log('handleDelete');
    showConfirmModal({
      title: 'Delete the specified entries?',
      okType: 'danger',
      action: () =>
        state.selectedRowKeys.forEach((x) => {
          props.uiStore.deleteRecord(x);
        }),
    });
  };
  const handleExport = (): void => console.log('handleExport');
  const handleEChangeStatus = (): void => console.log('handleEChangeStatus');

  return (
    <>
      <Popover content="Delete">
        <Button type="link" onClick={handleDelete}>
          <DeleteFilled />
        </Button>
      </Popover>

      <Popover content="Export filtered table entries as CSV">
        <Button type="link" onClick={handleExport}>
          <FileFilled />
        </Button>
      </Popover>

      <Popover content="Change status of selected assets">
        <Button type="link" onClick={handleEChangeStatus}>
          <SettingFilled />
        </Button>
      </Popover>
    </>
  );
}

export default memo(EventsJournalActions);
