import React from 'react';
import CollapsedContent from '../collapsed-content';
import styled from 'styled-components';
import CollapsableForm from '../../../../common/expand-collapse';
import DynamicTable from '../../DynamicTable';
import { useOrderProductSystemLogs } from '../../store';
import { tableColumns } from '../helper';
// import { useAxios } from '@bjsdistribution/dms-component-library';
// import { ApiResponse } from '../../types';

function SystemLogs() {
  const [systemLogs] = useOrderProductSystemLogs();
  // const [, setNotesData] = useEventNotesData();

  // event API
  // const {
  //   data: systemLogsData,
  //   fetchData: callSystemLogAPI,
  //   loading,
  // } = useAxios<{
  //   data: ApiResponse[];
  // }>({
  //   endpoint: `/events/get/event/`,
  //   method: 'GET',
  //   pagination: { is_pagination: false },
  // });

  // useEffect(() => {
  //   callSystemLogAPI();
  // }, []);

  // useEffect(() => {
  //   if (systemLogsData && systemLogsData?.data) {
  //     setNotesData(systemLogsData?.data);
  //   }
  // }, [loading]);

  return (
    <Table>
      <CollapsableForm collapsedContent={<CollapsedContent />}>
        <DynamicTable columns={tableColumns} data={systemLogs} />
      </CollapsableForm>
    </Table>
  );
}
const Table = styled.div`
  width: 100%;
`;
export default SystemLogs;
