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

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

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

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

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

function Tabs(props) {
  return (
    <ButtonGroup className={styles.Tabs} variant="contained" aria-label="outlined primary button group">
      {TABS.map((item, index) => {
        const isActive = props.activeTab.id === item.id;
        let result;
        let tier = null;

        if (item.id === 'AVERAGE') {
          result = Math.round(props[item.key] * 100) / 100;
        } else {
          const abbreviateObject = abbreviateNumber(props[item.key], 1, true);
          // eslint-disable-next-line prefer-destructuring
          result = abbreviateObject.result;
          // eslint-disable-next-line prefer-destructuring
          tier = abbreviateObject.tier;
        }

        return (
          <Button
            key={item.id}
            className={styles.Tab}
            onClick={() => {
              props.handleTabClick(item);
            }}
          >
            <Paper
              elevation={props.activeTab.id === item.id ? 10 : 4}
              className={classNames(styles.Paper, {
                [styles.Paper___leftside]: index === 0,
                [styles.Paper___active]: isActive,
                [styles.Paper___notActive]: !isActive,
              })}
            >
              <Typography
                variant="caption"
                color={isActive ? 'text.primary' : 'text.secondary'}
                component="div"
                fontWeight={500}
              >
                {item.title}
              </Typography>

              {props[item.key] ? (
                <div className={styles.TabValue}>
                  <Typography variant="h4Alt" color={isActive ? 'primary.main' : 'text.secondary'} fontWeight={500}>
                    {props[item.key] ? result : 'N/A'}
                  </Typography>

                  {result && tier && (
                    <Typography variant="h6" color={isActive ? 'primary.main' : 'text.secondary'}>
                      {tier}
                    </Typography>
                  )}

                  {item.additionalKey && props[item.additionalKey] !== null && (
                    <Typography
                      variant="h6"
                      color={isActive ? 'primary.main' : 'text.secondary'}
                      className={styles.TabValuePercent}
                      fontWeight={500}
                    >
                      {`${props[item.additionalKey]}%`}
                    </Typography>
                  )}
                </div>
              ) : (
                <div className={classNames(styles.TabValue, styles.TabValue___small)}>
                  <Typography variant="caption" color="text.disabled">
                    No data...
                  </Typography>
                </div>
              )}

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

Tabs.propTypes = {
  activeTab: PropTypes.shape({
    id: PropTypes.string,
    title: PropTypes.string,
    key: PropTypes.string,
    query: PropTypes.string,
    tooltipTitle: PropTypes.string,
    chartTooltipFormatter: PropTypes.func,
  }).isRequired,
  handleTabClick: PropTypes.func.isRequired,
};

export default Tabs;
