import React from 'react';
import PropTypes from 'prop-types';

import { PDF_EXPORT_HIDE_SCROLL } from '@/modules/analytics/common/constants';

import { Typography } from '@/mui/components';

import styles from './Countries.module.scss';

function Countries(props) {
  return (
    <div className={styles.Countries} data-pdf-export={PDF_EXPORT_HIDE_SCROLL}>
      <Typography
        variant="caption"
        color="text.primary"
        component="div"
        fontWeight={400}
        className={styles.CountriesTitle}
      >
        Top Countries
      </Typography>
      <Typography variant="captionSmall" color="text.secondary" component="div" className={styles.CountriesDescr}>
        by revenue
      </Typography>

      {!!props.countries?.length && (
        <div className={styles.CountriesContent}>
          <div className={styles.CountriesList}>
            {props.countries?.map((item) => (
              <div key={item.name} className={styles.CountriesItem}>
                <Typography variant="caption" color="text.primary" fontWeight={400} className={styles.CountriesName}>
                  {item.name}
                </Typography>

                <div className={styles.CountriesValues}>
                  <Typography
                    variant="caption"
                    color="primary.main"
                    fontWeight={600}
                    className={styles.CountriesPercent}
                  >
                    {`${Math.round(item.valuePct * 100) / 100}%`}
                  </Typography>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {!props.countries?.length && (
        <div className={styles.NoData}>
          <Typography variant="subtitle1" color="text.disabled" className={styles.NoDataTitle}>
            {props.isTotalsLoading ? 'Loading...' : 'No Data...'}
          </Typography>
        </div>
      )}
    </div>
  );
}

Countries.propTypes = {
  countries: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      valuePct: PropTypes.number.isRequired,
    }),
  ).isRequired,
  isTotalsLoading: PropTypes.bool.isRequired,
};

export default Countries;
