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

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

export const TabPanel: React.FC<TabPanelProps> = (props) => {
  const { children, eventKey, otherProps } = props;
  const { activeKey } = useTabContext();
  const refPanel = useRef<HTMLDivElement>(null);

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

  useEffect(() => {
    if (activeKey === eventKey) {
      setTimeout(() => {
        refPanel.current.style.opacity = '1';
      }, 0);
    } else {
      refPanel.current.style.opacity = '0';
    }
  }, [activeKey, eventKey]);

  return (
    <div key={eventKey} ref={refPanel} className={classNames(activeKey, eventKey)} role="tabpanel" aria-hidden={activeKey !== eventKey} {...otherProps}>
      {children}
    </div>
  );
};