text: import React, { Fragment } from 'react';
  import PropTypes from 'prop-types';
  import { View, Text, Link } from '@react-pdf/renderer';
  import { Table, CSAwIcon } from '@redhat-cloud-services/frontend-components-pdf-generator';
  import { processDate } from '@redhat-cloud-services/frontend-components-utilities/files/cjs/helpers';
  import { CVES_PATH } from '../../../../Helpers/constants';
  import messages from '../../../../Messages';
  import styles from './styles';
  import { formatDate } from '../../../../Helpers/MiscHelper';
  
  const tablePage = ({ data, page, intl, header, type, isReportDynamic = false }) => {
      const POSSIBLE_HEADERS = [
          {
              name: 'publish_date',
              header: { value: intl.formatMessage(messages.publishDate) }
          },
          {
              name: 'cvss_filter',
              header: { value: intl.formatMessage(messages.cvssBaseScore) },
              hit: 'cvss_score'
          },
          {
              name: 'impact',
              header: { value: intl.formatMessage(messages.impact) },
              hit: 'impact'
          },
          {
              name: 'affecting',
              header: { value: intl.formatMessage(messages.systemsExposed) },
              hit: 'systems_affected'
          },
          {
              name: 'business_risk_id',
              header: { value: intl.formatMessage(messages.businessRisk) },
              hit: 'business_risk'
          },
          {
              name: 'status_id',
              header: { value: intl.formatMessage(messages.status) },
              hit: 'status'
          }
      ];
      // eslint-disable-next-line react/prop-types
      const columnBuilder = ({ value, style }) => <Text key={value} style={style}>{value}</Text>;
      let hitColumns = ['cvss_score', 'impact', 'systems_affected', 'business_risk', 'status'];
  
      let headerContent = [];
  
      // if the header is undefined we use default header (all params)
      if (header) {
          headerContent.push({ value: intl.formatMessage(messages.cveId) });
          hitColumns = [];
  
          POSSIBLE_HEADERS.forEach(item => {
              if (header.includes(item.name)) {
                  headerContent.push(item.header);
                  item.hit && hitColumns.push(item.hit);
              }
          });
      }
      else if (type === 'cves') {
          headerContent = [
              { value: intl.formatMessage(messages.cveId) }
          ].concat(POSSIBLE_HEADERS.map(item => item.header));
      }
      else {
          hitColumns = ['display_name', 'cve_count', 'updated'];
  
          headerContent = [
              { value: 'Name' },
              { value: 'Applicable CVEs' },
              { value: 'Last seen' }
          ];
      }
  
      const hasRules = (cve) => {
          const hasRule = cve.rules && cve.rules.length > 0;
          return isReportDynamic ? hasRule && header.includes('rule_presence') : hasRule;
      };
  
      const cveRows = [
          ...data.map(({ attributes: cve }) => {
              let cveCellStyle = (
                  hasRules(cve)
                      ? [styles.cveCellAlign, styles.bodyCell, styles.cveCell]
                      : [styles.bodyCell, styles.cveCell]
              );
  
              const synopsisCell = (
                  <View key={cve.synopsis}>
                      { hasRules(cve) && <CSAwIcon style={{ ...styles.bodyCell, ...styles.cveCell }}/> }
                      <Text style={cveCellStyle}>
                          <Link
                              style={styles.link}
                              src={`${CVES_PATH}/${cve.synopsis}`}
                          >
                              {cve.synopsis}
                          </Link>
                      </Text>
                  </View>
              );
  
              const publishDateCell = (
                  (!header || header.includes('publish_date')) &&
                      <Text key={cve.public_date} style={[styles.bodyCell, styles.cveCell]}>
                          { processDate(cve.public_date) }
                      </Text>
              );
  
              return [
                  synopsisCell,
                  publishDateCell,
                  ...hitColumns.map(item => columnBuilder({ value: cve[item], style: [styles.bodyCell, styles.cveCell] }))
              ];
          })
      ];
  
      const systemRows = [
          ...data.map(({ attributes: system }) => {
              return [
                  columnBuilder({ value: system.display_name, style: [styles.bodyCell, styles.systemNameCell] }),
                  columnBuilder({ value: system.opt_out
                      ? intl.formatMessage(messages.systemsTableExcluded)
                      : system.cve_count, style: [styles.bodyCell, styles.systemCell]
                  }),
                  columnBuilder({ value: formatDate(system.updated, true), style: [styles.bodyCell, styles.systemCell] })
              ];
          })
      ];
  
      return <Fragment key={page}>
          <Table
              withHeader
              rows={[
                  headerContent.map(item => columnBuilder({
                      ...item,
                      style: [styles.headerCell, type === 'cves'
                          ? styles.cveCell
                          : item.value === 'Name'
                              ? styles.systemNameCell
                              : styles.systemCell]
                  })),
                  ... (type === 'cves') ? cveRows : systemRows
              ]}
          />
          { data.length === 0 && <Text>{intl.formatMessage(messages.customReportNoCves)}</Text> }
      </Fragment>;
  };
  
  tablePage.propTypes = {
      data: PropTypes.object,
      intl: PropTypes.any,
      page: PropTypes.number,
      header: PropTypes.array,
      type: PropTypes.string,
      isReportDynamic: PropTypes.bool
  };
  
  export default tablePage;
  