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

import { DEVICES_CONFIG } from '../../constants';

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

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

function Devices(props) {
  return (
    <div className={styles.Devices}>
      {Object.keys(DEVICES_CONFIG).map((key) => (
        <div key={key} className={styles.DevicesItem}>
          <Typography variant="caption" color="text.primary" fontWeight={500}>
            {DEVICES_CONFIG[key].title}
          </Typography>

          {props[key].all || props[key].all === 0 ? (
            <div className={styles.DevicesAllWrap}>
              <Typography variant="h4Alt" color="primary.main" fontWeight={500} className={styles.DevicesAll}>
                {props[key].all}
              </Typography>
              <Typography variant="h6" color="primary.main" className={styles.DevicesAll}>
                %
              </Typography>
            </div>
          ) : (
            <div className={styles.DevicesAllWrap}>
              <Typography variant="caption" color="text.disabled" className={styles.DevicesAll___empty} component="div">
                No data...
              </Typography>
            </div>
          )}

          {DEVICES_CONFIG[key].items.map((item) => (
            <div key={`${key}-${item.title}`} className={styles.Device}>
              <Typography variant="captionSmall" color="text.secondary">
                {item.title}
              </Typography>

              <Typography
                variant="captionSmall"
                color={props[key][item.key] || props[key][item.key] === 0 ? 'primary.main' : 'text.secondary'}
              >
                {props[key][item.key] || props[key][item.key] === 0 ? `${props[key][item.key]}%` : '−'}
              </Typography>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

Devices.propTypes = {
  desktop: PropTypes.shape({
    all: PropTypes.number,
    medium: PropTypes.number,
    large: PropTypes.number,
    xLarge: PropTypes.number,
  }).isRequired,
  mobile: PropTypes.shape({
    all: PropTypes.number,
    medium: PropTypes.number,
    small: PropTypes.number,
    xSmall: PropTypes.number,
  }).isRequired,
};

export default Devices;
