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

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

function CustomTooltip(props) {
  const splited = props.label?.split('|');
  const fullDate = splited?.[0];

  return props.active && props.payload?.length && props.showTooltip ? (
    <div className={styles.Tooltip}>
      <p className={styles.Tooltip_label}>{fullDate}</p>
      {props.payload.map((item, index) => {
        if (item.color !== 'transparent' && item.name !== 'LOG') {
          const [name, value] = props.formatter(item.name, item.value);
          return (
            <div key={`${index + 1}-${name}-${value}`} className={styles.Tooltip_row}>
              <span style={{ color: item.color }}>{name}</span>
              <span className={styles.Tooltip_value}>{value}</span>
            </div>
          );
        }

        return null;
      })}
    </div>
  ) : null;
}

CustomTooltip.propTypes = {
  active: PropTypes.bool.isRequired,
  payload: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  label: PropTypes.string.isRequired,
  formatter: PropTypes.func.isRequired,
  showTooltip: PropTypes.bool.isRequired,
};

export default CustomTooltip;
