import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';
import styled, { css } from 'styled-components';
import { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import Button from '../Button';
import { getFocusables } from '../../utils';
import Flex from '../Flex';
import Text from '../Text';
import { StyledCardContent } from '../Card/CardContent';
import { StyledCard } from '../Card/Card';
import { StyledCardHeader } from '../Card/CardHeader';
import TabsContext from './TabsContext';
import { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';
const defaultProps = {
    tabId: ''
};
export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme }) => {
    return css `
    min-width: 0;
    max-width: 100%;

    :focus-visible {
      outline: none;
      box-shadow: ${tablistType === 'horizontal' && level > 1
        ? theme.base.shadow['focus-inset']
        : theme.base.shadow.focus};
    }

    ${!current &&
        css `
      display: none;
    `}

    ${tablistType === 'horizontal' &&
        level > 1 &&
        css `
      background-color: ${theme.base.palette['primary-background']};
      border: 0.0625rem solid ${theme.base.palette['border-line']};
      border-block-start: none;
      border-end-start-radius: calc(0.5rem * 0.5);
      border-end-end-radius: calc(0.5rem * 0.5);
    `}

    ${theme.components.tabs.detached &&
        tablistType === 'horizontal' &&
        css `
      background: ${theme.base.palette['primary-background']};
      border: 0.0625rem solid ${theme.base.palette['border-line']};
      border-block-start: none;
      border-radius: var(--border-radius, ${theme.base['border-radius']});
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});

      &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {
        @media (width < ${theme.base.breakpoints.sm}) {
          padding: 0;
        }
      }

      &&& ${StyledCardContent} {
        padding: 0;
        ${StyledCard} {
          border: 0;
          padding: 0;
        }
      }

      &&& ${StyledCard} {
        padding: calc(2 * ${theme.base.spacing});
        padding-block-start: ${theme.base.spacing};
        border: 0.0625rem solid ${theme.base.palette['border-line']};
        border-radius: var(--border-radius, ${theme.base['border-radius']});
        background: ${theme.components.card.background};
      }

      &&& > ${StyledCard} {
        padding: 0;
        border: 0;
      }

      ${StyledAllTabsWrapper} {
        ${StyledTabs} {
          margin-block-end: 0;
        }
      }

      ${level > 1 &&
            css `
        :has(&) {
          ${StyledAllTabsWrapper} {
            ${StyledTabs} {
              margin: 0;
            }
          }
        }
      `}
    `}
  `;
});
StyledTabPanel.defaultProps = defaultThemeProp;
const StyledButton = styled(Button)(({ theme }) => {
    return css `
    padding-inline: calc(${theme.base.spacing});
    opacity: 0;
    &:focus {
      opacity: 1;
    }
  `;
});
StyledButton.defaultProps = defaultThemeProp;
const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tablistRef, tablistType = 'horizontal', children, ...restProps }, ref) {
    const t = useI18n();
    const tabPanelRef = useConsolidatedRef(ref);
    const [showReturnButton, setShowReturnButton] = useState(false);
    const { level } = useContext(TabsContext);
    const onFocusChange = useCallback((isFocused) => {
        if (!isFocused) {
            setShowReturnButton(false);
        }
    }, []);
    useFocusWithin([tabPanelRef], onFocusChange);
    const contextValue = useMemo(() => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }), [level, tablistType]);
    const onKeyUp = () => {
        if (tabPanelRef.current?.contains(document.activeElement)) {
            setShowReturnButton(true);
        }
    };
    useEvent('keyup', onKeyUp);
    const currentTab = currentTabId && tabId ? currentTabId === tabId : true;
    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(StyledTabPanel, { ...restProps, container: {
                direction: 'column',
                rowGap: 1,
                ...(tablistType === 'horizontal' && {
                    pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]
                })
            }, item: { grow: 1 }, current: currentTab, inert: currentTab ? undefined : '', role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, tablistType: tablistType, level: level, children: [title && _jsx(Text, { variant: `h${Math.min(2 + level, 6)}`, children: title }), children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
                        getFocusables(tablistRef)[0]?.focus();
                    }, children: t('return_to_tab_list') }))] }) }));
});
TabPanel.defaultProps = defaultProps;
export default TabPanel;
//# sourceMappingURL=TabPanel.js.map