import styled, { css } from 'styled-components';
import { getSVGSize, getIconButtonSize, getIconButtonBackgroundColorLoading, getIconButtonBackgroundColor, getDisabledBackgroundColor, getHoverIconButtonBackground, getActiveIconButtonBackground, getSpinnerType, getIconButtonSvgColor, getBorderColor } from './utils.js';
import { convertToTransientProps, getDefaultTransition } from '../../utils/index.js';

const FlexButton = styled.button `
  display: flex;
  align-items: center;
  justify-content: center;
`;
styled(FlexButton).withConfig({
    shouldForwardProp: convertToTransientProps(['isLoading']),
}) `
  ${({ size }) => getSVGSize(size)}
`;
const IconButtonContainer = styled.button.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isLoading',
        'hasFocus',
    ]),
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  height: ${({ size }) => getIconButtonSize(size)};
  width: ${({ size }) => getIconButtonSize(size)};
  border-radius: ${({ theme }) => theme.radius.roundedE};
  background-color: ${({ variant, isLoading, theme }) => {
    return isLoading
        ? getIconButtonBackgroundColorLoading(variant, theme.mode === 'dark')
        : getIconButtonBackgroundColor(variant);
}};
  border: unset;
  ${({ disabled, variant, isLoading }) => {
    return (disabled &&
        !isLoading &&
        css `
        background-color: ${getDisabledBackgroundColor(variant)};
      `);
}}
  &:hover {
    cursor: ${({ isLoading }) => (isLoading ? 'wait' : 'pointer')};
    background: ${({ isLoading, disabled, variant, theme }) => !isLoading &&
    !disabled &&
    getHoverIconButtonBackground(variant, theme.mode === 'dark')};
  }
  &:active {
    background: ${({ isLoading, disabled, variant, theme }) => !isLoading &&
    !disabled &&
    getActiveIconButtonBackground(variant, theme.mode === 'dark')};
  }
  svg {
    ${({ size, variant, disabled, isLoading }) => {
    return css `
        ${getSVGSize(size)};
        fill: ${isLoading
        ? getSpinnerType(variant)
        : getIconButtonSvgColor(variant, disabled)};
      `;
}}
  }
  &:disabled:hover {
    cursor: not-allowed;
  }
  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px
      ${({ variant, hasFocus }) => getBorderColor(variant, hasFocus)};
  }
  ${getDefaultTransition()};
`;

export { FlexButton, IconButtonContainer };
