import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { ArrowDownward, ArrowUpward, InfoOutlined } from '@mui/icons-material';

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

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

function Card(props) {
  const isActiveCard = props.id === props.activeCardFilter?.id;
  const Icon = props.valuePct >= 0 ? ArrowUpward : ArrowDownward;
  return (
    <Paper
      elevation={4}
      className={classNames(styles.Card, {
        [styles.Card___active]: isActiveCard,
        [styles.Card___disabled]: props.isDisabled,
      })}
      onClick={props.isDisabled ? null : props.onClick}
    >
      <Typography className={styles.Title} variant="caption" color="text.primary" fontWeight={400}>
        {props.title}
      </Typography>

      {props.value !== null && props.value !== undefined && !props.isDisabled ? (
        <Typography
          className={classNames(styles.Value, {
            [styles.Value___active]: isActiveCard,
          })}
          variant="h5"
          color="text.primary"
          fontWeight={300}
        >
          {props.isTotalsLoading
            ? 'Loading...'
            : `${props.prefix ?? ''}${(
                Math.round((props.postfix ? props.value * 100 : props.value) * 100) / 100
              ).toLocaleString()}${props.postfix ?? ''}`}
        </Typography>
      ) : (
        <Typography className={styles.NoData} variant="subtitle1" color="text.disabled">
          {props.isTotalsLoading ? 'Loading...' : 'No data...'}
        </Typography>
      )}

      {props.valuePct !== null && props.valuePct !== undefined && !props.isDisabled && (
        <div>
          <Icon
            className={styles.Arrow}
            fontSize="xSmall"
            htmlColor={props.valuePct >= 0 ? 'success.main' : 'error.main'}
          />

          {!props.hideComparisonNumbers && (
            <Typography variant="captionSmall" color="text.primary" fontWeight={400}>
              {`${Math.round(props.valuePct * 100) / 100}%`}
            </Typography>
          )}
        </div>
      )}

      <Tooltip title={props.tooltipText} placement="top">
        <span className={styles.InfoIconWrap}>
          <InfoOutlined fontSize="xSmall" htmlColor="info.main" />
        </span>
      </Tooltip>
    </Paper>
  );
}

Card.propTypes = {
  activeCardFilter: PropTypes.shape({
    title: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    key: PropTypes.string.isRequired,
    prefix: PropTypes.string,
    postfix: PropTypes.string,
  }).isRequired,
  title: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  valuePct: PropTypes.string.isRequired,
  prefix: PropTypes.string.isRequired,
  postfix: PropTypes.string.isRequired,
  hideComparisonNumbers: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  isTotalsLoading: PropTypes.bool.isRequired,
  tooltipText: PropTypes.string.isRequired,
  isDisabled: PropTypes.bool.isRequired,
};

export default Card;
