import { space, color as styledColor, typography, variant as styledVariant } from 'styled-system';
import { darken, rgba } from 'polished';
import { css } from 'styled-components';
import { ColorVariants } from '../../theme.js';
import { cssClass, themeGet } from '../../utils/index.js';
const getColor = theme => color => theme.colors[ColorVariants[color] || 'primary100'];
const legacyButtonVariants = ['danger', 'default', 'info', 'primary', 'secondary', 'success'].reduce((acc, color) => ({
  ...acc,
  [color]: {
    className: cssClass(['Button', 'Button_Legacy']),
    borderColor: 'currentColor',
    color: theme => getColor(theme)(color),
    '&:hover': {
      bg: theme => rgba(getColor(theme)(color), 0.05)
    },
    '&:focus, &:active': {
      bg: theme => rgba(getColor(theme)(color), 0.1)
    }
  }
}), {});
const buttonVariants = ({
  color = 'primary'
}) => styledVariant({
  variants: {
    ...legacyButtonVariants,
    contained: {
      className: cssClass(['Button', 'Button_Contained']),
      color: theme => theme.colors.white,
      bg: theme => getColor(theme)(color),
      borderColor: theme => getColor(theme)(color),
      '&:hover': {
        bg: theme => darken(0.15, getColor(theme)(color)),
        borderColor: theme => darken(0.15, getColor(theme)(color))
      },
      '&:focus, &:active': {
        bg: theme => darken(0.2, getColor(theme)(color)),
        borderColor: theme => darken(0.2, getColor(theme)(color))
      }
    },
    outlined: {
      className: cssClass(['Button', 'Button_Outlined']),
      borderColor: 'currentColor',
      color: theme => getColor(theme)(color),
      '&:hover': {
        bg: theme => rgba(getColor(theme)(color), 0.05)
      },
      '&:focus, &:active': {
        bg: theme => rgba(getColor(theme)(color), 0.1)
      }
    },
    light: {
      className: cssClass(['Button', 'Button_Light']),
      color: theme => color && getColor(theme)(color),
      borderColor: 'grey40',
      [`& .${cssClass('Icon')} svg`]: {
        stroke: 'grey80'
      },
      '&:hover': {
        bg: theme => rgba(getColor(theme)(color), 0.05)
      },
      '&:focus, &:active': {
        bg: theme => rgba(getColor(theme)(color), 0.1)
      }
    },
    text: {
      className: cssClass(['Button', 'Button_Text']),
      color: theme => color && getColor(theme)(color),
      borderColor: 'transparent',
      '&:disabled': {
        'border-color': 'transparent'
      },
      '&:hover': {
        bg: theme => rgba(getColor(theme)(color), 0.05)
      },
      '&:focus, &:active': {
        bg: theme => rgba(getColor(theme)(color), 0.1)
      }
    }
  }
});
const sizeVariants = styledVariant({
  prop: 'size',
  variants: {
    sm: {
      fontSize: 'sm',
      py: 'xs',
      lineHeight: 'default',
      px: 'lg',
      [`& .${cssClass('Icon')}`]: {
        marginTop: '-1px',
        marginBottom: '-1px'
      }
    },
    default: {
      py: 'sm',
      px: 'xxl',
      lineHeight: 'lg'
    },
    md: {
      py: 'sm',
      px: 'xxl',
      lineHeight: 'lg'
    },
    lg: {
      py: 'default',
      px: 'x3',
      lineHeight: 'lg'
    },
    icon: {
      py: 'default',
      px: 'default',
      lineHeight: 'sm',
      minWidth: '34px',
      height: '34px',
      [`& .${cssClass('Icon')} svg`]: {
        padding: 0,
        margin: 0
      }
    }
  }
});

/**
 * Button CSS Styles which can be reused in another button-like component with styled-components
 *
 * Usage:
 * ```
 * import { ButtonCSS } from '@adminjs/design-system'
 * import { Link } from 'react-router-dom'
 *
 * const MyStyledLink = styled(Link)`
 *   ${ButtonCSS}
 * `
 * ```
 * @memberof Button
 * @alias ButtonCSS
 */
export const ButtonCSS = css(["-webkit-appearance:none;-moz-appearance:none;display:inline-block;background-color:transparent;outline:0;font-family:", ";font-size:", ";vertical-align:middle;border-radius:", ";user-select:none;text-align:center;border:1px solid ", ";color:", ";cursor:pointer;text-decoration:none;box-sizing:border-box;& > .", "{vertical-align:middle;}& > .", " svg{margin:0 ", " 0 0;}& .", "{color:inherit;}transition:all 0.1s ease-in;", ";&:disabled{background-color:rgba(0,0,0,0.2);border-color:transparent;color:rgba(0,0,0,0.3);cursor:auto;&:hover,&:focus,&:active{background-color:rgba(0,0,0,0.2);border-color:transparent;}}", ";", ";", ";", ";", ";"], ({
  theme
}) => theme.font, themeGet('fontSizes', 'default'), themeGet('space', 'sm'), themeGet('colors', 'primary100'), themeGet('colors', 'primary100'), cssClass('Icon'), cssClass('Icon'), themeGet('space', 'md'), cssClass('Icon'), ({
  rounded
}) => rounded ? 'border-radius: 9999px' : '', styledColor, space, typography, buttonVariants, sizeVariants);
export default ButtonCSS;