import ElectionIcon from "../../ElectionIcon/index.js";
import { useCallback } from 'react';
import IfActive from "../../../application/IfActive/index.js";
import { useTrackStandardEvent } from "../../../../hooks/tracking/index.js";
import classes from './styles.module.scss';
import getLabel from './getLabel';
const ExpandoButton = function ExpandoButton(props) {
  const {
    isExpanded,
    setIsExpanded,
    expandLabel,
    collapseLabel,
    showLabel,
    size,
    id
  } = props;
  const iconType = isExpanded ? 'Collapse' : 'Expand';
  const label = getLabel(isExpanded, expandLabel, collapseLabel);
  const track = useTrackStandardEvent({
    component: 'ResultsTable'
  });
  const clickHandler = useCallback(e => {
    // prevent the default click behavior - leaderboard might be a link
    e.preventDefault();
    setIsExpanded(prev => {
      const next = !prev;
      track({
        event: next ? 'expand' : 'collapse',
        detail: id
      });
      return next;
    });
  }, [setIsExpanded, track]);
  return <button className={classes.container} type="button" aria-label={label} onClick={clickHandler}>
      <ElectionIcon type={iconType} color="warmgray-60" size={size} />
      <IfActive active={showLabel}>
        <span className={classes.label}>{label}</span>
      </IfActive>
    </button>;
};
ExpandoButton.defaultProps = {
  size: '3',
  showLabel: true
};
export default ExpandoButton;