import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useContext } from 'react';
import styled, { css } from 'styled-components';
import { meetsContrastGuidelines, mix, transparentize } from 'polished';
import { readableHue } from '../../styles';
import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
import { registerIcon } from '../Icon';
import { useConsolidatedRef, useElement, useI18n } from '../../hooks';
import Tooltip from '../Tooltip';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import { StyledCount } from '../Badges/Count';
import BareButton from '../Button/BareButton';
import TabsContext from './TabsContext';
import { StyledErrorIcon } from './Tabs.styles';
registerIcon(warnSolidIcon);
const activeStyle = (color) => css `
  ::after {
    display: block;
    background-color: ${color};
  }
`;
const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level && level > 1
    ? css `
        ::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border-radius: inherit;
          background-color: currentColor;
          opacity: ${opacity};
        }
      `
    : css `
        background-color: ${color};
        border-start-start-radius: calc(0.5rem * 0.5);
        border-start-end-radius: calc(0.5rem * 0.5);
      `;
const getHorizontalStyles = ({ selected, level, theme }) => {
    const color = theme.components.button.color;
    const secondaryColor = theme.base.palette['secondary-background'];
    const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';
    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;
    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);
    const hoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));
    const activeBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));
    const { spacing } = theme.base;
    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;

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

    span:first-of-type {
      color: ${selected ? color : theme.base.palette['foreground-color']};
      display: inline-block;

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

    &:first-child {
      margin-left: 0;
    }

    ::after {
      background: ${selected ? color : lightenedColor};
      display: ${selected ? 'block' : 'none'};
      content: '';
      position: absolute;
      height: 0.125rem;
      bottom: 0;
      left: calc(1.5 * ${spacing});
      right: calc(1.5 * ${spacing});
    }

    ${!selected
        ? css `
          @media (hover: hover) {
            &:not(:disabled):hover {
              text-decoration: none;
              ${getHorizontalUnselectedHoverStyle({
            level,
            opacity: 0.1,
            color: hoverBackgroundColor
        })}
            }

            &:not(:disabled):active {
              text-decoration: none;
              ${getHorizontalUnselectedHoverStyle({
            level,
            opacity: 0.2,
            color: activeBackgroundColor
        })}
            }
          }
        `
        : css `
          ${level &&
            level > 1 &&
            css `
            background-color: ${theme.base.palette['primary-background']};
          `}
        `}

    &:focus,
    &:not([disabled]):focus {
      border-radius: calc(0.5rem * 0.5);
      box-shadow: ${theme.base.shadow['focus-inset']};
      text-decoration: none;
      ::after {
        display: none;
      }
    }

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

    ${StyledCount} {
      margin-inline-start: calc(0.5 * ${spacing});
    }
  `;
};
const getVerticalStyles = ({ selected, theme }) => {
    const borderColor = theme.base.palette['border-line'];
    const primaryColor = theme.base.palette.interactive;
    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';
    const { spacing } = theme.base;
    return css `
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    color: ${theme.base.palette['foreground-color']};
    border-width: 0.0625rem 0;
    border-color: ${borderColor};
    height: calc(5.5 * ${spacing});
    margin-top: -0.0625rem;
    padding: 0 calc(2 * ${spacing});
    text-decoration: none;

    &:first-child {
      border-top: 0.0625rem solid ${borderColor};
    }

    ::after {
      content: '';
      position: absolute;
      display: ${selected ? 'block' : 'none'};
      top: 0;
      bottom: 0;
      right: 0;
      width: 0.25rem;
      background: ${primaryColor};
    }

    &:hover&:not(:disabled) {
      ${activeStyle(lightenedColor)}
      text-decoration: none;
    }

    &:focus,
    &:not([disabled]):focus {
      ${activeStyle(primaryColor)}
      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};
      text-decoration: none;
    }
  `;
};
export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `
    position: relative;
    background: none;
    cursor: pointer;
    white-space: nowrap;

    ${selected &&
    css `
      font-weight: bold;
    `}

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

    &:focus {
      outline: none;
    }

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

    ${tabType === 'horizontal'
    ? getHorizontalStyles({ theme, selected, level })
    : 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 { level } = useContext(TabsContext);
    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, level: level, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
});
export default Tab;
//# sourceMappingURL=Tab.js.map