import React, { useState, useCallback } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
import { urlBuilder } from 'foremanReact/common/urlHelpers';
import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import TableWrapper from '../../../../../components/Table/TableWrapper';
import { getActivationKeys } from '../../ContentViewDetailActions';
import {
  selectCVActivationKeys, selectCVActivationKeysStatus,
} from '../../ContentViewDetailSelectors';
import EnvironmentLabels from '../../../components/EnvironmentLabels';

const AffectedActivationKeys = ({
  versionEnvironments, selectedEnvSet, cvId, deleteCV,
}) => {
  const [searchQuery, updateSearchQuery] = useState('');
  const response = useSelector(state => selectCVActivationKeys(state), shallowEqual);
  const status = useSelector(state => selectCVActivationKeysStatus(state), shallowEqual);
  const selectedEnv = deleteCV ?
    versionEnvironments :
    versionEnvironments.filter(env => selectedEnvSet?.has(env.id));

  const fetchItems = useCallback(() => {
    const formSearch = () => {
      let cvQuery = `content_view_id = ${cvId}`;
      const selectedEnvStrings = selectedEnv.map(env => `environment=${env.name}`).join(' OR ');
      if (selectedEnvStrings.length) cvQuery += ` AND ( ${selectedEnvStrings} )`;
      if (searchQuery.length) cvQuery += ` AND ( ${searchQuery} )`;
      return cvQuery;
    };
    return getActivationKeys({ search: formSearch() });
  }, [cvId, searchQuery, selectedEnv]);

  const columnHeaders = [
    __('Name'),
    __('Environment'),
  ];
  const emptyContentTitle = __('No matching activation keys found.');
  const emptyContentBody = __("Given criteria doesn't match any activation keys. Try changing your rule.");
  const emptySearchTitle = __('Your search returned no matching activation keys.');
  const emptySearchBody = __('Try changing your search criteria.');
  const { results, ...metadata } = response;
  return (
    <TableWrapper
      {...{
        metadata,
        emptyContentTitle,
        emptyContentBody,
        emptySearchTitle,
        emptySearchBody,
        searchQuery,
        updateSearchQuery,
        fetchItems,
        status,
      }}
      ouiaId="content-view-delete-modal-affected-activation-keys"
      autocompleteEndpoint="/activation_keys/auto_complete_search"
      variant={TableVariant.compact}
    >
      <Thead>
        <Tr>
          {columnHeaders.map(col =>
            <Th key={col}>{col}</Th>)}
        </Tr>
      </Thead>
      <Tbody>
        {results?.map(({ name, id, environment }) => (
          <Tr key={`${id}`}>
            <Td>
              <a rel="noreferrer" target="_blank" href={urlBuilder(`activation_keys/${id}`, '')}>{name}</a>
            </Td>
            <Td><EnvironmentLabels environments={environment} /></Td>
          </Tr>
        ))
        }
      </Tbody>
    </TableWrapper>
  );
};

AffectedActivationKeys.propTypes = {
  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  selectedEnvSet: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.shape({}),
  ]),
  versionEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
  deleteCV: PropTypes.bool,
};

AffectedActivationKeys.defaultProps = {
  selectedEnvSet: null,
  versionEnvironments: null,
  deleteCV: false,
};
export default AffectedActivationKeys;