import React, { useState, useEffect } from "react";
import Nav, { INavProps } from "../nav/nav";
import NavLink from "../nav/nav-link";
import NavItem from "../nav/nav-item";
import TabContent from "./tab-content";
import TabPane from "./tab-pane";
import { ITabProps } from "./tab";

type ITabsChild = React.ReactElement<ITabProps>;

interface ITabsProps {
  defaultActiveKey: string;
  activeKey?: string;
  className?: string;
  children: ITabsChild | ITabsChild[];
  variant?: INavProps["variant"];
  onSelect?: (event: React.SyntheticEvent, eventKey: string) => void;
  tabContentClassName?: string;
  ["data-testid"]?: string;
}

const Tabs: React.FC<ITabsProps> = ({
  className,
  variant = "tabs",
  defaultActiveKey,
  activeKey,
  onSelect,
  children,
  tabContentClassName,
  ...props
}) => {
  const [key, setKey] = useState<string>(defaultActiveKey);
  const dataTestId = props["data-testid"] || "honey-ui-tabs";

  const onClick = (event: React.SyntheticEvent, eventKey: string) => {
    event.preventDefault();
    if (onSelect) {
      onSelect(event, eventKey);
    } else {
      setKey(eventKey);
    }
  };

  useEffect(() => {
    if (activeKey) {
      setKey(activeKey);
    }
  }, [activeKey]);

  return (
    <>
      <Nav variant={variant} className={className} data-testid={`${dataTestId}-nav`}>
        {React.Children.map(children, (child: ITabsChild) => {
          const { title, eventKey, isDisabled, href, className, navLinkClassName } = child.props;

          if (!eventKey && !href) {
            return null;
          }

          return (
            <NavItem className={className} data-testid={`${dataTestId}-nav-item-tab-${title}`}>
              {eventKey ? (
                <NavLink
                  data-testid={`${dataTestId}-nav-link-tab-${title}`}
                  className={navLinkClassName}
                  isActive={key === eventKey}
                  isDisabled={isDisabled}
                  href="#"
                  onClick={(event: React.SyntheticEvent) => onClick(event, eventKey)}
                >
                  {title}
                </NavLink>
              ) : (
                <NavLink
                  isActive={key === href}
                  isDisabled={isDisabled}
                  href={href}
                  data-testid={`${dataTestId}-nav-link-tab-${title}`}
                  className={navLinkClassName}
                >
                  {title}
                </NavLink>
              )}
            </NavItem>
          );
        })}
      </Nav>
      <TabContent className={tabContentClassName} data-testid={`${dataTestId}-tab-content`}>
        {React.Children.map(children, (child: ITabsChild) => {
          const { eventKey, children, href, tabPaneClassName, title } = child.props;

          return (
            <TabPane
              isActive={key === eventKey || key === href}
              className={tabPaneClassName}
              data-testid={`${dataTestId}-tab-pane-tab-${title}`}
            >
              {children}
            </TabPane>
          );
        })}
      </TabContent>
    </>
  );
};

Tabs.displayName = "Tabs";

export default Tabs;