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

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

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

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

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

function TopSearches(props) {
  const highestRate = props.data?.[0]?.rate ?? 1;
  return (
    <ul className={styles.TopSearches} data-pdf-export={PDF_EXPORT_HIDE_SCROLL}>
      {props.data.map((item) => (
        <li className={styles.TopSearchesItem} key={`${item.query}-${item.count}`}>
          <Typography
            className={styles.TopSearchesTitle}
            variant="caption"
            color="text.primary"
            fontWeight={400}
            component="div"
          >
            {item.query}
          </Typography>
          <div className={styles.TopSearchesValue}>
            <Typography variant="caption" color="primary.main" fontWeight={400}>
              {abbreviateNumber(item.count)}
            </Typography>
            <div className={styles.TopSearchesProgressContainer}>
              <LinearProgress
                classes={{
                  root: styles.Progress,
                  bar: styles.ProgressBar,
                  colorPrimary: styles.ProgressBg,
                }}
                variant="determinate"
                value={Math.round((item.rate * 100) / highestRate)}
              />
            </div>

            <Typography variant="caption" color="primary.main" fontWeight={400}>
              {`${Math.round(item.rate * 100)}%`}
            </Typography>
          </div>
        </li>
      ))}
    </ul>
  );
}

TopSearches.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      query: PropTypes.string.isRequired,
      count: PropTypes.number.isRequired,
      rate: PropTypes.number.isRequired,
    }),
  ).isRequired,
};

export default TopSearches;
