import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
import { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';
import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
import { registerIcon } from '../Icon';
import { useConsolidatedRef, useElement, useI18n, useUID } from '../../hooks';
import Tooltip from '../Tooltip';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import Count, { StyledCount } from '../Badges/Count';
import BareButton from '../Button/BareButton';
import HiddenText from '../HiddenText';
import { StyledErrorIcon } from './Tabs.styles';
registerIcon(warnSolidIcon);
const getHorizontalStyles = ({ selected, theme }) => {
    const color = theme.components.button.color;
    const foreground = theme.base.palette['foreground-color'];
    const { detached: tabsDetached } = theme.components.tabs;
    const secondaryColor = tabsDetached
        ? theme.base.palette['primary-background']
        : theme.base.palette['secondary-background'];
    // If the secondary color is not a solid color, use the readable color as the fallback background.
    const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);
    const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);
    const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);
    const hoverBackgroundColor = tabsDetached
        ? tryCatch(() => transparentize(0.95, foreground))
        : tryCatch(() => mix(0.9, fallbackBackground, usableColor));
    const activeBackgroundColor = tabsDetached
        ? theme.base.palette['secondary-background']
        : tryCatch(() => mix(0.8, fallbackBackground, usableColor));
    const { spacing } = theme.base;
    let activeTabColor = theme.base.palette.interactive;
    if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {
        activeTabColor = readableHue(activeTabColor, fallbackBackground);
    }
    return css `
    align-items: center;
    display: flex;
    flex-direction: row;
    height: calc(4 * ${spacing});
    padding: 0 calc(1.5 * ${spacing});
    border: none;
    text-decoration: none;
    transition-property: background-color;
    transition-duration: max(${theme.base.animation.speed}, 1ms);
    transition-timing-function: ${theme.base.animation.timing.ease};

    @media (pointer: coarse) {
      height: ${theme.base['hit-area']['finger-min']};
    }

    span:first-of-type {
      color: ${selected ? color : foreground};
      display: inline-block;
      transition-property: color;
      transition-duration: ${selected ? `max(${theme.base.animation.speed}, 1ms)` : '0s'};
      transition-timing-function: ${theme.base.animation.timing.ease};

      &::before {
        content: attr(data-content) / '';
        display: block;
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden;
      }
    }

    &:first-child {
      margin-inline-start: 0;
    }

    ${!selected &&
        css `
      @media (hover: hover) {
        &:not(:disabled):hover {
          text-decoration: none;
          background-color: ${hoverBackgroundColor};
        }

        &:not(:disabled):active {
          text-decoration: none;
          background-color: ${activeBackgroundColor};
        }
      }
    `}

    &:focus-visible,
    &:not(:disabled):focus-visible {
      text-decoration: none;
      outline: none;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: calc(0.5rem * 0.5);
        box-shadow: ${theme.base.shadow['focus-inset']};
        pointer-events: none;
        z-index: 3;
      }
    }

    &:first-child:focus-visible::after,
    &:first-child:not(:disabled):focus-visible::after {
      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
    }

    @media (pointer: coarse) {
      min-block-size: ${theme.base['hit-area'].finger};
    }

    ${StyledCount} {
      margin-inline-start: calc(0.5 * ${spacing});
    }

    ${tabsDetached &&
        css `
      &[aria-selected='true'],
      &:focus-visible,
      &:not([disabled]):focus-visible {
        color: ${activeTabColor};
        span:first-of-type {
          color: ${activeTabColor};
        }
        background: ${activeBackgroundColor};
      }
      &:hover:not(:disabled):not([aria-selected='true']) {
        background: ${hoverBackgroundColor};
        border-radius: 0;
        color: ${foreground};
        span:first-of-type {
          color: ${foreground};
        }
      }
    `}
  `;
};
const getVerticalStyles = ({ theme, selected }) => {
    const { detached: tabsDetached } = theme.components.tabs;
    const interactive = theme.base.palette.interactive;
    const foreground = theme.base.palette['foreground-color'];
    const secondary = theme.base.palette['secondary-background'];
    const { spacing } = theme.base;
    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
    const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);
    const activeTabColor = tabsDetached
        ? interactive
        : calculateForegroundColor(activeTabBg, foreground);
    const borderColor = theme.base.palette['border-line'];
    return css `
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    color: ${foreground};
    border-width: 0.0625rem 0;
    border-color: ${tabsDetached ? 'transparent' : borderColor};
    height: calc(5.5 * ${spacing});
    margin-top: -0.0625rem;
    padding: 0 calc(2 * ${spacing});
    text-decoration: none;
    transition-property: ${selected ? 'color, font-weight, background-color' : 'background-color'};
    transition-duration: max(${theme.base.animation.speed}, 1ms);
    transition-timing-function: ${theme.base.animation.timing.ease};

    &:first-child {
      border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};
    }

    &::before {
      content: '';
      position: absolute;
      ${tabsDetached ? 'inset-inline-start: 0;' : 'inset-inline-end: 0;'}
      inset-block-start: 0;
      inset-block-end: 0;
      width: 0.25rem;
      background: ${lightenedColor};
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      transition-property: opacity;
      transition-duration: max(${theme.base.animation.speed}, 1ms);
      transition-timing-function: ${theme.base.animation.timing.ease};
    }

    &:active {
      background: none;
    }

    &:active::before {
      opacity: 1;
    }

    &:hover:not(:disabled)::before {
      opacity: 1;
    }

    &:focus-visible,
    &:not(:disabled):focus-visible {
      text-decoration: none;
      outline: none;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 0 0.0625rem ${interactive};
        pointer-events: none;
        z-index: 3;
      }
    }

    ${tabsDetached &&
        css `
      border-radius: calc(0.5 * ${theme.base['border-radius']});
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});

      &:focus-visible::after,
      &:not(:disabled):focus-visible::after {
        border-radius: calc(0.5 * ${theme.base['border-radius']});
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }

      &:not(:disabled):focus-visible,
      &[aria-selected='true'] {
        color: ${activeTabColor};
      }
      &:hover:not(:disabled):not([aria-selected='true']) {
        background: ${lightenedColor};
      }
    `}
  `;
};
export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
    position: relative;
    cursor: pointer;
    white-space: nowrap;

    > * {
      position: relative;
      z-index: 1;
    }

    ${selected &&
    css `
      font-weight: bold;
      transition-property: font-weight;
      transition-duration: max(${theme.base.animation.speed}, 1ms);
      transition-timing-function: ${theme.base.animation.timing.ease};
    `}

    ${!selected &&
    css `
      transition: font-weight 0s;
    `}

    & + & {
      margin-inline-start: 0;
    }

    &:focus-visible {
      outline: none;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: ${theme.base['disabled-opacity']};
    }

    ${tabType === 'horizontal'
    ? getHorizontalStyles({ theme, selected })
    : getVerticalStyles({ theme, selected })}

    ${StyledErrorIcon} {
      margin-inline-end: calc(0.5 * ${theme.base.spacing});
    }
  `);
StyledTab.defaultProps = defaultThemeProp;
const Tab = forwardRef(function Tab({ selected, content, count, type, disabled, errors, ...restProps }, ref) {
    const t = useI18n();
    const [tabEl, setTabEl] = useElement();
    const tabRef = useConsolidatedRef(ref, setTabEl);
    const countDescID = useUID();
    const errorDescID = useUID();
    const commaDescID = useUID();
    const describedBy = [];
    if (typeof count === 'number') {
        describedBy.push(countDescID);
    }
    if (typeof count === 'number' && errors) {
        describedBy.push(commaDescID);
    }
    if (errors) {
        describedBy.push(errorDescID);
    }
    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, "aria-describedby": describedBy.length > 0 ? describedBy.join(' ') : undefined, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', describeTarget: false, children: t('tab_error_tooltip', [content]) }), _jsx(HiddenText, { id: errorDescID, children: t('tab_error_description') })] })), _jsx("span", { "data-content": content, children: content })] }), typeof count === 'number' && _jsx(Count, { id: countDescID, children: count }), typeof count === 'number' && errors && _jsx(HiddenText, { id: commaDescID, children: "," })] }));
});
export default Tab;
//# sourceMappingURL=Tab.js.map