import styled, { css } from 'styled-components';
import { convertToTransientProps, getDefaultTransition, getSpacing, getColorAlias, isLightMode, getLightenColor, getDarkenColor, getModifiedColorByThemeMode, getFontSize } from '../../utils/index.js';

const SpinnerWrapper = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const ContentWrapper = styled.span ``;
const StyledButton = styled.button.withConfig({
    shouldForwardProp: convertToTransientProps(['isLoading', 'fullWidth']),
}) `
  ${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: ${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 css `
          --button-bg-color: ${getColorAlias('interactiveBrand')};
          --button-font-color: ${getColorAlias('contentInteractivePrimary')};

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

  ${({ variant, disabled }) => {
    if (!disabled) {
        return variant === 'primary'
            ? css `
            --button-svg-fill: ${getColorAlias('contentInteractivePrimary')};
          `
            : css `
            --button-svg-fill: ${getColorAlias('contentInteractiveBrand')};
          `;
    }
    else {
        return css `
        --button-svg-fill: ${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 ${getColorAlias('focusOuter')};
  }

  & > * {
    pointer-events: none;
  }
`;
const IconContainer = styled.span `
  display: flex;
`;

export { ContentWrapper, IconContainer, SpinnerWrapper, StyledButton };
