import classnames from 'classnames';
import { useNavigationPages } from "../../../hooks/election/index.js";
import SegmentedControlGroup from "../../action/SegmentedControlGroup/index.js";
import Button from "../../action/Button/index.js";
import PropTypes from 'prop-types';
import { useResponsiveValues } from "../../../hooks/breakpoint/index.js";
import { useTrackStandardEvent } from "../../../hooks/tracking/index.js";
import classes from './styles.module.scss';
const COLORS = {
  fg: {
    default: 'warmgray-100',
    active: 'white',
    hover: 'warmgray-100',
    disabled: 'warmgray-40'
  },
  bg: {
    default: 'white',
    active: 'warmgray-80',
    hover: 'warmgray-20',
    disabled: 'warmgray-10'
  },
  border: {
    default: 'warmgray-20',
    active: 'warmgray-80',
    hover: 'warmgray-20',
    disabled: 'warmgray-10'
  }
};

/**
 * A tilted toggle used to toggle between two "tabs" or values.
 * Mostly used to toggle bewtween GOP and Dem pages
 */
const ElectionToggle = function ElectionToggle(props) {
  const {
    tabs,
    activeTabIndex,
    setActiveTabIndex
  } = props;

  // Breakpoint size : Toggle Size
  const size = useResponsiveValues({
    xl: 'lg',
    sm: 'md',
    xs: 'sm'
  });
  const {
    statePages
  } = useNavigationPages();
  const hasStateNav = statePages.length > 0;
  const track = useTrackStandardEvent({
    component: 'ElectionToggle',
    event: 'Toggle'
  });
  return <div className={classnames(classes.container, {
    [classes.state]: hasStateNav
  })}>
      <div className={classes['election-toggle']}>
        <SegmentedControlGroup {...COLORS} mode="secondary">
          {tabs.map((t, idx) => <Button key={t.id} active={idx === activeTabIndex} size={size} onClick={() => {
          setActiveTabIndex(idx);
          track({
            detail: t.label
          });
        }} {...t} />)}
        </SegmentedControlGroup>
      </div>
    </div>;
};
ElectionToggle.defaultProps = {
  tabs: [],
  activeTabIndex: 0,
  setActiveTabIndex: () => {}
};
ElectionToggle.propTypes = {
  /**
   * The tabs to display in the toggle button.
   */
  tabs: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    disabled: PropTypes.bool
  })),
  /**
   * The index of the tab that is currently active.
   */
  activeTabIndex: PropTypes.number,
  /**
   * A callback to set the active tab index
   */
  setActiveTabIndex: PropTypes.func
};
export default ElectionToggle;