import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
// Legacy Button should not be use anymore
import { lighten } from 'polished';
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize, fontWeight, white } from '../../style/theme';
import { Loader } from '../loader/Loader.component';
export const ButtonStyled = styled.button `
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  display: inline-flex;
  user-select: none;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  text-decoration: none;
  font-weight: ${fontWeight.base};

  &:hover,
  &:focus,
  &:active {
    outline: none;
    cursor: pointer;
  }

  ${(props) => {
    switch (props.size) {
        case 'smaller':
            return css `
          padding: 7px 14px;
          font-size: ${fontSize.smaller};
          border-radius: 4px;
          height: 27px;
        `;
        case 'small':
            return css `
          padding: 8px 16px;
          font-size: ${fontSize.small};
          border-radius: 5px;
          height: 30px;
        `;
        case 'large':
            return css `
          padding: 10px 20px;
          font-size: ${fontSize.large};
          border-radius: 7px;
          height: 40px;
        `;
        case 'larger':
            return css `
          padding: 11px 22px;
          font-size: ${fontSize.larger};
          border-radius: 8px;
          height: 48px;
        `;
        case 'base':
        default:
            return css `
          padding: 12px 16px;
          font-size: ${fontSize.base};
          border-radius: 6px;
          height: 32px;
        `;
    }
}}

  ${(props) => {
    if (props.isLoading) {
        return css `
        > span {
          display: flex;
          .sc-loader {
            margin: 0px ${spacing.r4};
            svg {
              fill: ${props.theme.textPrimary} !important;
            }
          }
        }
      `;
    }
    if (props.outlined) {
        return css `
        border-width: 1px;
        border-style: solid;
        border-color: ${props.theme.buttonSecondary};
        // to be checked
        background-color: ${props.theme.backgroundLevel1};
        color: ${props.theme.textPrimary};

        &:hover {
          border-color: ${props.theme.infoPrimary};
          color: ${props.theme.textPrimary};
        }
      `;
    }
    else if (props.variant === 'buttonPrimary') {
        return css `
        background-color: ${props.theme.buttonPrimary};
        border: 1px solid ${props.theme.buttonPrimary};
        color: ${props.theme.textPrimary};
        &:hover {
          background-color: ${props.theme.highlight};
          outline: none;
          border: 1px solid ${props.theme.infoPrimary};
        }
      `;
    }
    else if (props.variant === 'buttonSecondary') {
        return css `
        background-color: ${props.theme.buttonSecondary};
        border: 1px solid ${props.theme.buttonSecondary};
        color: ${props.theme.textPrimary};
        &:hover {
          background-color: ${props.theme.infoPrimary};
          border: 1px solid ${props.theme.infoPrimary};
        }
      `;
    }
    else if (props.variant === 'buttonDelete') {
        return css `
        background-color: ${props.theme.buttonDelete};
        border: 1px solid ${props.theme.buttonDelete};
        color: ${props.theme.statusCritical};
        &:hover {
          background-color: ${props.theme.statusCritical};
          border: 1px solid ${props.theme.infoPrimary};
          color: ${props.theme.textPrimary};
        }
      `;
    }
    else if (props.variant === 'backgroundLevel1') {
        return css `
        background-color: ${props.theme.backgroundLevel1};
        color: ${props.theme.textPrimary};
        &:hover {
          background-color: ${props.theme.highlight};
        }
      `;
    }
    else {
        return css `
        background-color: ${props.theme.backgroundLevel1};
        border: 1px solid ${props.theme.backgroundLevel1};
        color: ${props.theme.statusCritical};
        &:hover {
          background-color: ${props.theme.backgroundLevel1};
          border: 1px solid ${props.theme.infoPrimary};
          color: ${props.theme.textPrimary};
        }
      `;
    }
}}

${(props) => {
    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
    return css `
      ${props.disabled
        ? `
          box-shadow: none;
          pointer-events: none;
          opacity: 0.3;
          border-color: ${brandLighter};
          color: ${white};
        `
        : null}
    `;
}}

${(props) => {
    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
    const brandLight = lighten(0.1, props.theme[props.variant]).toString();
    return css `
      ${!props.text && props.icon && props.inverted
        ? `
        padding: 0;
        height: auto;
        border: none;
        background-color: transparent;
        color: ${props.disabled ? brandLight : props.theme[props.variant]};

        &:hover{
          background-color: transparent;
          color: ${brandLight};
          border: none;
        }

        &:active {
          background-color: transparent;
          color: ${brandLighter};
        }
        `
        : null}
    `;
}}
`;
export const ButtonIcon = styled.span `
  ${(props) => props.text &&
    css `
      padding-right: 8px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    `}
`;
export const ButtonText = styled.span `
  display: inline-flex;
  justify-content: center;
  align-items: center;
`;
export const ButtonContent = styled.span `
  position: relative;
`;
const Anchor = ButtonStyled.withComponent('a');
/**
 * @deprecated
 * You should use ButtonV2 with
 * import { Button } from '@scality/core-ui/dist/next';
 */
function Button({ text = '', href = '', icon = null, size = 'base', variant = 'buttonPrimary', outlined = false, disabled = false, onClick, title = '', isLoading = false, type = 'button', inverted = false, ...rest }) {
    return href && href.length ? (_jsxs(Anchor, { className: "sc-button", href: href, variant: variant, outlined: outlined, disabled: disabled, size: size, title: title, ...rest, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })) : (_jsx(ButtonStyled, { className: "sc-button", variant: variant, outlined: outlined, disabled: disabled || isLoading, size: size, onClick: onClick, title: title, isLoading: isLoading, type: type, inverted: inverted, icon: icon, text: text, ...rest, children: _jsxs(ButtonContent, { children: [isLoading && _jsx(Loader, { size: size }), _jsxs("span", { className: "sc-button-text", children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })] }) }));
}
export { Button };
