<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Button from 'components/button';
import { Link } from 'react-router-dom';
import Icon from 'components/icon';
import cx from 'classnames';
import compareSubmittedIcon from 'assets/icons/compare-submitted.svg';
import compareNotSubmittedIcon from 'assets/icons/compare-not-submitted.svg';
import compareIntendsIcon from 'assets/icons/compare-intends.svg';
import { Table } from 'cw-components';
import NoContent from 'components/no-content';
import Loading from 'components/loading';
import compareTableTheme from 'styles/themes/table/compare-table-theme.scss';
import { DOCUMENT_COLUMNS_SLUGS } from 'data/country-documents';

import styles from './ndc-compare-all-targets-table-styles.scss';

const cellRenderer = (
  cell,
  selectedTargets = [],
  columns,
  setSelectedTargets
) => {
  const { cellData, dataKey, columnIndex, rowData } = cell;
  const id = `${rowData.Country.iso}-${DOCUMENT_COLUMNS_SLUGS[dataKey]}`;
  const isActive = selectedTargets.includes(id);
  const isLastColumn = columnIndex === columns.length - 1;

  const canSelect = selectedTargets.length < 3;
  const addSelectedTarget = target => {
    if (selectedTargets.includes(target)) {
      setSelectedTargets(selectedTargets.filter(t => t !== target));
    } else if (canSelect) {
      setSelectedTargets([...selectedTargets, target]);
    }
  };

  if (dataKey === 'Country') {
    return <Link to={`/ndcs/country/${cellData.iso}`}>{cellData.name}</Link>;
  }
  if (dataKey === 'Share of global GHG emissions') {
    return cellData;
  }
  switch (cellData) {
    case 'yes': {
      const isDisabled = !isActive && !canSelect;
      return (
        <Button
          onClick={() => addSelectedTarget(id)}
          className={cx(
            styles.iconButton,
            { [styles.clickable]: isActive || canSelect },
            { [styles.lastColumn]: isLastColumn },
            { [styles.active]: isActive }
          )}
          disabled={isDisabled}
          title={
            isDisabled
              ? 'You can select a maximum of 3 documents'
              : 'Select document to compare'
          }
        >
          <Icon icon={compareSubmittedIcon} className={styles.submitIcon} />
        </Button>
      );
    }
    case 'intends': {
      return (
        <button
          className={cx(styles.iconButton, {
            [styles.lastColumn]: isLastColumn
          })}
        >
          <Icon icon={compareIntendsIcon} className={styles.submitIcon} />
        </button>
      );
    }
    default: {
      return (
        <button
          className={cx(styles.iconButton, {
            [styles.lastColumn]: isLastColumn
          })}
        >
          <Icon icon={compareNotSubmittedIcon} className={styles.submitIcon} />
        </button>
      );
    }
  }
};

const CompareAllTable = ({
  loading,
  tableData,
  columns,
  noContentMsg,
  selectedTargets,
  setSelectedTargets
}) => (
  <div className={compareTableTheme.compareTableWrapper}>
    {loading && (
      <div className={styles.loaderWrapper}>
        <Loading light />
      </div>
    )}
    {!loading && tableData && tableData.length > 0 && (
      <Table
        data={tableData}
        tableHeight={550}
        tableWidthOffset={-90}
        parseHtml
        setColumnWidth={() => 115}<commit_msg>Leave space so we can see the toolbar<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Button from 'components/button';
import { Link } from 'react-router-dom';
import Icon from 'components/icon';
import cx from 'classnames';
import compareSubmittedIcon from 'assets/icons/compare-submitted.svg';
import compareNotSubmittedIcon from 'assets/icons/compare-not-submitted.svg';
import compareIntendsIcon from 'assets/icons/compare-intends.svg';
import { Table } from 'cw-components';
import NoContent from 'components/no-content';
import Loading from 'components/loading';
import compareTableTheme from 'styles/themes/table/compare-table-theme.scss';
import { DOCUMENT_COLUMNS_SLUGS } from 'data/country-documents';

import styles from './ndc-compare-all-targets-table-styles.scss';

const cellRenderer = (
  cell,
  selectedTargets = [],
  columns,
  setSelectedTargets
) => {
  const { cellData, dataKey, columnIndex, rowData } = cell;
  const id = `${rowData.Country.iso}-${DOCUMENT_COLUMNS_SLUGS[dataKey]}`;
  const isActive = selectedTargets.includes(id);
  const isLastColumn = columnIndex === columns.length - 1;

  const canSelect = selectedTargets.length < 3;
  const addSelectedTarget = target => {
    if (selectedTargets.includes(target)) {
      setSelectedTargets(selectedTargets.filter(t => t !== target));
    } else if (canSelect) {
      setSelectedTargets([...selectedTargets, target]);
    }
  };

  if (dataKey === 'Country') {
    return <Link to={`/ndcs/country/${cellData.iso}`}>{cellData.name}</Link>;
  }
  if (dataKey === 'Share of global GHG emissions') {
    return cellData;
  }
  switch (cellData) {
    case 'yes': {
      const isDisabled = !isActive && !canSelect;
      return (
        <Button
          onClick={() => addSelectedTarget(id)}
          className={cx(
            styles.iconButton,
            { [styles.clickable]: isActive || canSelect },
            { [styles.lastColumn]: isLastColumn },
            { [styles.active]: isActive }
          )}
          disabled={isDisabled}
          title={
            isDisabled
              ? 'You can select a maximum of 3 documents'
              : 'Select document to compare'
          }
        >
          <Icon icon={compareSubmittedIcon} className={styles.submitIcon} />
        </Button>
      );
    }
    case 'intends': {
      return (
        <button
          className={cx(styles.iconButton, {
            [styles.lastColumn]: isLastColumn
          })}
        >
          <Icon icon={compareIntendsIcon} className={styles.submitIcon} />
        </button>
      );
    }
    default: {
      return (
        <button
          className={cx(styles.iconButton, {
            [styles.lastColumn]: isLastColumn
          })}
        >
          <Icon icon={compareNotSubmittedIcon} className={styles.submitIcon} />
        </button>
      );
    }
  }
};

const CompareAllTable = ({
  loading,
  tableData,
  columns,
  noContentMsg,
  selectedTargets,
  setSelectedTargets
}) => (
  <div className={compareTableTheme.compareTableWrapper}>
    {loading && (
      <div className={styles.loaderWrapper}>
        <Loading light />
      </div>
    )}
    {!loading && tableData && tableData.length > 0 && (
      <Table
        data={tableData}
        tableHeight={550}
        tableWidthOffset={-100}
        parseHtml
        setColumnWidth={() => 115}
{'fraction_non_alphanumeric': 0.13015826061233546, 'fraction_numerical': 0.0036976778583049843, 'mean_word_length': 2.6710097719869705, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4829967', 'n_tokens_mistral': 1976, 'n_tokens_neox': 1930, 'n_words': 412}