import React, { useContext, useState } from 'react';

export interface TabContextProps {
  activeKey: string;
  defaultActiveKey: string;
  setActiveKey(key: string): void;
  setDefaultActiveKey(key: string): void;
  onSelect?(eventKey: any, event: React.SyntheticEvent): void;
}

export interface TabProviderProps {
  defaultActiveKey?: string;
  children: React.ReactNode;
  onSelect?(eventKey: any, event: React.SyntheticEvent): void;
}

export const TabContext = React.createContext<Partial<TabContextProps>>({});

export const TabProvider: React.FC<TabProviderProps> = (props) => {
  const initialState: TabContextProps = {
    activeKey: props.defaultActiveKey ?? null,
    defaultActiveKey: props.defaultActiveKey ?? null,
    onSelect: props.onSelect ? props.onSelect : null,
    setActiveKey(key: string) {
      setState((prevState) => ({ ...prevState, activeKey: key }));
    },
    setDefaultActiveKey(key: string) {
      setState((prevState) => ({ ...prevState, defaultActiveKey: key }));
    },
  };

  const [state, setState] = useState(initialState);
  return <TabContext.Provider value={state}>{props.children}</TabContext.Provider>;
};

export function useTabContext() {
  const context = useContext(TabContext);
  return context;
}