import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';

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

import { abbreviateNumber } from '@/modules/@common/helpers/number';

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

import imgNoData from '@/modules/analytics/common/components/Stub/img/imgNoData.png';

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={500}
        className={styles.CountriesTitle}
      >
        Top Countries
      </Typography>
      <Typography variant="captionSmall" color="text.disabled" component="div" className={styles.CountriesDescr}>
        by user sessions
      </Typography>

      {!!props.countries?.items?.length && (
        <div>
          <div className={styles.CountriesItem}>
            <Typography variant="caption" color="text.primary" className={styles.CountriesName}>
              All Countries
            </Typography>

            <div className={styles.CountriesValues}>
              <Typography variant="caption" color="primary.main" className={styles.CountriesValue}>
                {abbreviateNumber(props.countries.all)}
              </Typography>

              <Typography variant="captionSmall" color="primary.main" className={styles.CountriesPercent}>
                100%
              </Typography>
            </div>
          </div>

          {props.countries?.items?.map((item) => (
            <div key={item.name} className={styles.CountriesItem}>
              <Typography variant="caption" color="text.secondary" className={styles.CountriesName}>
                {item.name}
              </Typography>

              <div className={styles.CountriesValues}>
                <Typography variant="caption" color="primary.main" className={styles.CountriesValue}>
                  {abbreviateNumber(item.value)}
                </Typography>
                <Typography variant="captionSmall" color="primary.main" className={styles.CountriesPercent}>
                  {`${item.percent}%`}
                </Typography>
              </div>
            </div>
          ))}
        </div>
      )}

      {!props.countries?.items?.length && (
        <div className={styles.NoData}>
          <div className={styles.NoDataImageWrapper}>
            <Image src={imgNoData} fill unoptimized loading="eager" alt="No Data" />
          </div>

          <Typography variant="subtitle1" color="text.secondary" className={styles.NoDataTitle}>
            No Data...
          </Typography>

          <Typography variant="caption" color="text.disabled" component="div">
            No Data matching selected filters.
          </Typography>

          <Typography variant="caption" color="text.disabled" component="div">
            Try adjusting your filters.
          </Typography>
        </div>
      )}
    </div>
  );
}

Countries.propTypes = {
  countries: PropTypes.shape({
    all: PropTypes.number,
    items: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string.isRequired,
        value: PropTypes.number.isRequired,
        percent: PropTypes.number.isRequired,
      }),
    ),
  }).isRequired,
};

export default Countries;
