import React, { createContext, useCallback, useState, useMemo, useContext } from 'react';
import { styled, css } from 'styled-components';
import assert from '../../utils/assert.js';
const StyledButton = styled.button.withConfig({
  displayName: "tabs__StyledButton",
  componentId: "sc-1ue9ts9-0"
})(["background:none;border:none;padding:", ";cursor:pointer;border-bottom:2px solid ", ";color:", ";user-select:none;", ";", ""], ({
  theme
}) => `${theme.space.lg} ${theme.space.xl}`, ({
  theme
}) => theme.colors.border, ({
  theme
}) => theme.colors.grey60, ({
  theme
}) => ({
  fontFamily: theme.font,
  fontSize: theme.fontSizes.md,
  lineHeight: theme.lineHeights.lg
}), ({
  active,
  theme
}) => active && css(["border-color:", ";color:", ";"], theme.colors.primary100, theme.colors.primary100));
const StyledContent = styled.div.withConfig({
  displayName: "tabs__StyledContent",
  componentId: "sc-1ue9ts9-1"
})(["display:flex;flex-direction:column;"]);
const StyledHeader = styled.div.withConfig({
  displayName: "tabs__StyledHeader",
  componentId: "sc-1ue9ts9-2"
})(["display:flex;"]);
const StyledSpacer = styled.div.withConfig({
  displayName: "tabs__StyledSpacer",
  componentId: "sc-1ue9ts9-3"
})(["flex-grow:1;border-bottom:2px solid ", ";"], ({
  theme
}) => theme.colors.border);

/**
 * Tabs component renders a tab navigation bar that lets the user select a Tab
 * to display below. Children of the selected Tab are then rendered below the
 * navigation bar.
 */
export const Tabs = ({
  currentTab,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  onChange = () => {},
  children,
  fullWidth = true,
  headerComponent: Header = StyledHeader,
  buttonComponent: Button = StyledButton,
  contentComponent: Content = StyledContent
}) => {
  const [tabs, setTabs] = useState([]);
  const registerTab = useCallback((id, title) => {
    setTabs(currentTabs => {
      if (currentTabs.find(t => t.id === id)) {
        // eslint-disable-next-line no-console
        console.error(`There are multiple Tab components with ID '${id}'`);
      }
      return [...currentTabs, {
        id,
        title
      }];
    });
  }, []);
  const unregisterTab = useCallback(id => setTabs(newTabs => newTabs.filter(t => t.id !== id)), []);
  const memoizedContext = useMemo(() => ({
    currentTab,
    registerTab,
    unregisterTab
  }), [currentTab, registerTab, unregisterTab]);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line no-use-before-define
    React.createElement(TabContext.Provider, {
      value: memoizedContext
    }, /*#__PURE__*/React.createElement(StyledContent, {
      role: "tablist"
    }, /*#__PURE__*/React.createElement(Header, null, tabs.map(({
      id,
      title
    }) => /*#__PURE__*/React.createElement(Button, {
      role: "tab",
      active: id === currentTab,
      key: id,
      onClick: () => onChange(id),
      tabId: id
    }, title)), fullWidth && /*#__PURE__*/React.createElement(StyledSpacer, null)), /*#__PURE__*/React.createElement(Content, {
      role: "tabpanel"
    }, children)))
  );
};
export const TabContext = /*#__PURE__*/createContext({
  registerTab: () => {
    // eslint-disable-next-line no-console
    console.error('Tab used outside of Tabs component. Tab needs to be a child of Tabs.');
  },
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  unregisterTab: () => {},
  currentTab: ''
});
export const useTabs = () => {
  const ctx = useContext(TabContext);
  assert(TabContext, 'useTabs is used outside TabContext');
  return ctx;
};
export default Tabs;