import React from 'react';
import { useTabContext } from './context';

export interface TabProps {
  children: any;
  eventKey: string;
  [x: string]: any;
}

// id="simple-tab-0" aria-controls="simple-tabpanel-0"

export const Tab: React.FC<TabProps> = (props) => {
  const { children, eventKey, otherProps } = props;
  const { activeKey, setActiveKey, onSelect } = useTabContext();

  const handleClick = (e: React.MouseEvent) => {
    setActiveKey(eventKey);
    onSelect && onSelect(eventKey, e);
  };

  const classNames = (eventKey: string, activeKey: string): string => {
    let classList = 'b-tab';
    if (eventKey === activeKey) classList += ` active`;
    return classList;
  };

  return (
    <button key={eventKey} onClick={handleClick} className={classNames(eventKey, activeKey)} {...otherProps} role="button" aria-selected={eventKey === activeKey}>
      {children}
    </button>
  );
};