// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useState } from 'react';
import { Table, Pagination, TextFilter } from '@awsui/components-react';
import { useCollection } from '@awsui/collection-hooks';
import { Logger } from 'aws-amplify';

import useCallsContext from '../../contexts/calls';
import useSettingsContext from '../../contexts/settings';

import mapCallsAttributes from '../common/map-call-attributes';
import { paginationLabels } from '../common/labels';
import useLocalStorage from '../common/local-storage';
import { exportToExcel } from '../common/download-func';

import {
  CallsPreferences,
  CallsCommonHeader,
  COLUMN_DEFINITIONS_MAIN,
  KEY_COLUMN_ID,
  SELECTION_LABELS,
  DEFAULT_PREFERENCES,
  DEFAULT_SORT_COLUMN,
} from './calls-table-config';

import { getFilterCounterText, TableEmptyState, TableNoMatchState } from '../common/table';

import '@awsui/global-styles/index.css';

const logger = new Logger('CallList');

const CallList = () => {
  const [callList, setCallList] = useState([]);
  const { settings } = useSettingsContext();

  const {
    calls,
    isCallsListLoading,
    setIsCallsListLoading,
    setPeriodsToLoad,
    setSelectedItems,
    setToolsOpen,
    periodsToLoad,
  } = useCallsContext();

  const [preferences, setPreferences] = useLocalStorage(
    'call-list-preferences',
    DEFAULT_PREFERENCES,
  );

  // prettier-ignore
  const {
    items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps,
  } = useCollection(callList, {
    filtering: {
      empty: <TableEmptyState resourceName="Call" />,
      noMatch: <TableNoMatchState onClearFilter={() => actions.setFiltering('')} />,
    },
    pagination: { pageSize: preferences.pageSize },
    sorting: { defaultState: { sortingColumn: DEFAULT_SORT_COLUMN, isDescending: true } },
    selection: {
      keepSelection: false,
      trackBy: KEY_COLUMN_ID,
    },
  });

  useEffect(() => {
    if (!isCallsListLoading) {
      logger.debug('setting call list', calls);
      setCallList(mapCallsAttributes(calls, settings));
    } else {
      logger.debug('call list is loading');
    }
  }, [isCallsListLoading, calls]);

  useEffect(() => {
    logger.debug('setting selected items', collectionProps.selectedItems);
    setSelectedItems(collectionProps.selectedItems);
  }, [collectionProps.selectedItems]);

  /* eslint-disable react/jsx-props-no-spreading */
  return (
    <Table
      {...collectionProps}
      header={
        <CallsCommonHeader
          resourceName="Calls"
          selectedItems={collectionProps.selectedItems}
          totalItems={callList}
          updateTools={() => setToolsOpen(true)}
          loading={isCallsListLoading}
          setIsLoading={setIsCallsListLoading}
          periodsToLoad={periodsToLoad}
          setPeriodsToLoad={setPeriodsToLoad}
          downloadToExcel={() => exportToExcel(callList, 'Call-List')}
        />
      }
      columnDefinitions={COLUMN_DEFINITIONS_MAIN}
      items={items}
      loading={isCallsListLoading}
      loadingText="Loading calls"
      selectionType="multi"
      ariaLabels={SELECTION_LABELS}
      filter={
        <TextFilter
          {...filterProps}
          filteringAriaLabel="Filter calls"
          filteringPlaceholder="Find calls"
          countText={getFilterCounterText(filteredItemsCount)}
        />
      }
      wrapLines={preferences.wrapLines}
      pagination={<Pagination {...paginationProps} ariaLabels={paginationLabels} />}
      preferences={<CallsPreferences preferences={preferences} setPreferences={setPreferences} />}
      trackBy={items.callId}
      visibleColumns={[KEY_COLUMN_ID, ...preferences.visibleContent]}
      resizableColumns
    />
  );
};

export default CallList;