'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const SpinnerWrapper = styled__default['default'].div `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const ContentWrapper = styled__default['default'].span ``;
const StyledButton = styled__default['default'].button.withConfig({
    shouldForwardProp: index.convertToTransientProps(['isLoading', 'fullWidth']),
}) `
  ${index.getDefaultTransition()};
  --button-bg-color: transparent;
  --button-outline-offset: 1px;
  --button-font-color: inherit;
  --button-padding: 0;
  --button-min-height: 0;
  --button-svg-fill: inherit;
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: ${index.getSpacing('s02')};
  font-family: ${({ theme }) => theme.font.familyPrimary};
  font-weight: ${({ theme }) => theme.font.weightBold};
  letter-spacing: 0.5px;
  border-radius: ${({ theme }) => theme.radius.roundedE};
  position: relative;
  overflow: initial;
  border: unset;
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'fit-content')};
  margin: ${({ margin }) => margin || `0 2px`};
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-font-color);
  min-height: var(--button-min-height);

  ${({ variant, theme }) => {
    switch (variant) {
        case 'primary':
        default:
            return styled.css `
          --button-bg-color: ${index.getColorAlias('interactiveBrand')};
          --button-font-color: ${index.getColorAlias('contentInteractivePrimary')};

          &:hover {
            --button-bg-color: ${index.getModifiedColorByThemeMode('hover01', 'interactiveBrand')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('active01', 'interactiveBrand')};
          }
        `;
        case 'secondary':
            return styled.css `
          --button-bg-color: ${index.getColorAlias('interactiveSecondary')};
          --button-font-color: ${index.getColorAlias('contentInteractiveSecondary')};

          &:hover {
            --button-bg-color: ${index.getModifiedColorByThemeMode('hover01', 'interactiveSecondary')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('active01', 'interactiveSecondary')};
          }
        `;
        case 'outline':
            return styled.css `
          --button-font-color: ${index.getColorAlias('contentInteractiveTertiary')};
          --button-outline-offset: 2px;
          box-shadow: 0 0 0 1px ${index.getColorAlias('borderDefault')};

          &:hover {
            --button-bg-color: ${index.getModifiedColorByThemeMode('hover01', 'backgroundDefault')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('active01', 'backgroundDefault')};
          }
        `;
        case 'ghost':
            return styled.css `
          --button-font-color: ${index.getColorAlias('contentLink')};

          &:hover {
            --button-bg-color: ${index.getModifiedColorByThemeMode('hover01', 'backgroundDefault')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('active01', 'backgroundDefault')};
          }
        `;
        case 'inverse':
            return styled.css `
          --button-bg-color: ${index.getColorAlias('interactiveInverse')};
          --button-font-color: ${index.getColorAlias('contentInteractiveSecondary')};

          &:hover,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('hover01', 'interactiveInverse')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.getModifiedColorByThemeMode('active01', 'interactiveInverse')};
          }
        `;
        case 'inverse-ghost':
            return styled.css `
          --button-font-color: ${index.getColorAlias('contentInteractivePrimary')};

          &:hover {
            --button-bg-color: ${index.isLightMode(theme.mode)
                ? index.getLightenColor('hover01', 'contentDefault')
                : index.getDarkenColor('hover01', 'contentDefault')};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.isLightMode(theme.mode)
                ? index.getLightenColor('active01', 'contentDefault')
                : index.getDarkenColor('active01', 'contentDefault')};
          }
        `;
    }
}}

  ${({ size }) => {
    switch (size) {
        case 'large':
            return styled.css `
          ${index.getFontSize('size20')};
          --button-min-height: 56px;
          --button-padding: 14px ${index.getSpacing('s05')};
        `;
        case 'medium':
            return styled.css `
          ${index.getFontSize('size20')};
          --button-min-height: 48px;
          --button-padding: 10px ${index.getSpacing('s05')};
        `;
        case 'small-expressive':
            return styled.css `
          ${index.getFontSize('size20')};
          --button-min-height: 40px;
          --button-padding: 6px ${index.getSpacing('s04')};
        `;
        case 'small-productive':
            return styled.css `
          ${index.getFontSize('size16')};
          --button-min-height: 40px;
          --button-padding: ${index.getSpacing('s02', 's04')};
        `;
        case 'xSmall':
            return styled.css `
          ${index.getFontSize('size14')};
          --button-min-height: 32px;
          --button-padding: ${index.getSpacing('s01', 's02')};
        `;
    }
}}

  ${({ variant }) => {
    return variant === 'ghost' || variant === 'inverse-ghost'
        ? styled.css `
          &:disabled {
            --button-font-color: ${index.getColorAlias('contentDisabled')};
            --button-bg-color: transparent;
          }
        `
        : styled.css `
          &:disabled {
            --button-bg-color: ${index.getColorAlias('disabled01')};
            --button-font-color: ${index.getColorAlias('contentDisabled')};
          }
        `;
}}


  ${({ variant, size, theme, disabled }) => {
    return (variant === 'primary' &&
        (size === 'small-productive' || size === 'xSmall') &&
        styled.css `
        --button-bg-color: ${index.getColorAlias('interactivePrimary')};

         {
          ${!disabled &&
            styled.css `
            &:hover {
              --button-bg-color: ${index.isLightMode(theme.mode)
                ? index.getLightenColor('hover01', 'interactivePrimary')
                : index.getDarkenColor('hover01', 'interactivePrimary')};
            }

            &:active,
            &[data-status=\"loading\"] {
              --button-bg-color: ${index.isLightMode(theme.mode)
                ? index.getLightenColor('active01', 'interactivePrimary')
                : index.getDarkenColor('active01', 'interactivePrimary')};
            }
          `}

          /* This is to fix an edge case when variant is loading and disabled in the same time */
          &[data-status=\"loading\"] {
            --button-bg-color: ${index.isLightMode(theme.mode)
            ? index.getLightenColor('active01', 'interactivePrimary')
            : index.getDarkenColor('active01', 'interactivePrimary')};
          }
        }
      `);
}}


  svg {
    fill: var(--button-svg-fill);
  }

  ${({ variant, disabled }) => {
    if (!disabled) {
        return variant === 'primary'
            ? styled.css `
            --button-svg-fill: ${index.getColorAlias('contentInteractivePrimary')};
          `
            : styled.css `
            --button-svg-fill: ${index.getColorAlias('contentInteractiveBrand')};
          `;
    }
    else {
        return styled.css `
        --button-svg-fill: ${index.getColorAlias('contentDisabled')};
      `;
    }
}};

  &:hover {
    cursor: ${({ isLoading }) => (isLoading ? 'default' : 'pointer')};
  }

  &:disabled:hover {
    cursor: not-allowed;
  }

  &:focus,
  &:focus-visible {
    outline-offset: var(--button-outline-offset);
    outline: 2px solid ${index.getColorAlias('focusOuter')};
  }

  & > * {
    pointer-events: none;
  }
`;
const IconContainer = styled__default['default'].span `
  display: flex;
`;

exports.ContentWrapper = ContentWrapper;
exports.IconContainer = IconContainer;
exports.SpinnerWrapper = SpinnerWrapper;
exports.StyledButton = StyledButton;
