import { palette , theme } from 'styled-tools' ; import { darken } from 'polished' ; import _Button from 'reakit/Button' ; import _defaultPalette from '../themes/default/palette' ; import styled , { css , space } from '../styled' ; import Icon , { IconProps } from '../Icon/Icon' ; import Set from '../Set' ; import { ActionButtonsProps } from './ActionButtons' ; import { ButtonProps } from './Button' ; const defaultPalette = _defaultPalette ( { } ) ; export const isInteractive = ( props ) => ! props . isStatic && ! props . isLoading && ! props . disabled && props . kind !== 'link' ; export const sizeProperties = { small : css `
    & {
      font-size: ${ theme ( 'fannypack.fontSizes.100' ) }em;
      min-height: ${ space ( 8 ) }em;
      padding: 0 ${ space ( 2 ) }rem;
    }
    & {
      ${ theme ( 'fannypack.Button.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Button.sizes.default' ) };
    }
  ` , medium : css `
    & {
      min-height: ${ space ( 12 ) }em;
      padding: 0 ${ space ( 5 ) }rem;
    }
    & {
      ${ theme ( 'fannypack.Button.sizes.medium' ) };
    }
  ` , large : css `
    & {
      font-size: ${ theme ( 'fannypack.fontSizes.300' ) }em;
      min-height: ${ space ( 12 ) }em;
      padding: 0 ${ space ( 6 ) }rem;
    }
    & {
      ${ theme ( 'fannypack.Button.sizes.large' ) };
    }
  ` } ; export const linkProperties = css `
  & {
    border: 0;
    background: unset;
    color: ${ ( props ) => props . palette === 'default' ? palette ( 'text' , 0 , defaultPalette . text ) ( props ) : palette ( ) ( props ) };
    fill: ${ ( props ) => props . palette === 'default' ? palette ( 'text' , 0 , defaultPalette . text ) ( props ) : palette ( ) ( props ) };
    text-decoration: underline;

    &:hover {
      color: ${ ( props ) => props . palette === 'default' ? darken ( 0.5 , palette ( 'text' , 0 , defaultPalette . text ) ( props ) ) : darken ( 0.5 , palette ( ) ( props ) ) };
      fill: ${ ( props ) => props . palette === 'default' ? darken ( 0.5 , palette ( 'text' , 0 , defaultPalette . text ) ( props ) ) : darken ( 0.5 , palette ( ) ( props ) ) };
    }
  }
  & {
    ${ theme ( 'fannypack.Button.link' ) };
  }
` ; export const outlinedProperties = css `
  & {
    background-color: unset;
    border: 1px solid ${ palette ( ) };
    color: ${ palette ( ) };
    fill: ${ palette ( ) };

    ${ props => isInteractive ( props ) && css `
        &:hover {
          background-color: ${ palette ( ) };
          color: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
          fill: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
        }
      ` };
  }
  & {
    ${ theme ( 'fannypack.Button.outlined' ) };
  }
` ; export const ghostProperties = css < ButtonProps > `
  & {
    background-color: unset;
    border: unset;
    color: ${ props => ( props . palette === 'default' ? palette ( 'defaultInverted' ) : palette ( ) ) };
    fill: ${ props => ( props . palette === 'default' ? palette ( 'defaultInverted' ) : palette ( ) ) };

    &:hover {
      background-color: ${ ( props ) => darken ( 0.05 , palette ( 'default' ) ( props ) ) };
    }
    &:hover:active {
      background-color: ${ ( props ) => darken ( 0.1 , palette ( 'default' ) ( props ) ) };
    }
  }
  & {
    ${ theme ( 'fannypack.Button.ghost' ) };
  }
` ; export const disabledProperties = css `
  & {
    cursor: not-allowed;
    opacity: 0.7;
    outline: unset;
    pointer-events: unset;
  }
  & {
    ${ theme ( 'fannypack.Button.disabled' ) };
  }
` ; export const staticProperties = css `
  & {
    cursor: default;
    outline: unset;

    &:focus {
      box-shadow: unset !important;
      outline: unset !important;
    }
  }
  & {
    ${ theme ( 'fannypack.Button.static' ) };
  }
` ; export const interactiveProperties = css `
  &:hover {
    background-color: ${ ( props ) => darken ( 0.05 , palette ( ) ( props ) ) };
  }
  &:hover:active {
    background-color: ${ ( props ) => darken ( 0.1 , palette ( ) ( props ) ) };
  }
  & {
    ${ theme ( 'fannypack.Button.interactive' ) };
  }
` ; export const loadingProperties = css `
  & {
    cursor: not-allowed;
    position: relative;

    &:focus {
      box-shadow: unset !important;
      outline: unset !important;
    }
  }
  & {
    ${ theme ( 'fannypack.Button.loading' ) };
  }
` ; export const ButtonIcon = styled ( Icon ) < IconProps & { isAfter : boolean ; isBefore : boolean ; } > `
  ${ props => props . isBefore && css `
      margin-left: -${ space ( 1 ) }em;
      margin-right: ${ space ( 2 ) }em;
    ` };

  ${ props => props . isAfter && css `
      margin-left: ${ space ( 2 ) }em;
      margin-right: -${ space ( 1 ) }em;
    ` };

  & {
    ${ theme ( 'fannypack.Button.Icon.base' ) };
  }
` ; export const ActionButtons = styled ( Set ) < ActionButtonsProps > `
  & {
    ${ theme ( 'fannypack.ActionButtons.base' ) };
  }
` ; export const Button = styled ( _Button ) < ButtonProps & { styledSize : any ; } > `
  align-items: center;
  background-color: ${ palette ( ) };
  border-radius: 4px;
  color: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
  fill: ${ ( props ) => palette ( `${ props . palette }Inverted` ) ( props ) };
  cursor: pointer;
  display: inline-flex;
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };
  min-height: 2.5em;
  justify-content: center;
  padding: 0 0.8rem;
  text-decoration: none;
  hyphens: auto;

  &:focus {
    outline: unset;
    z-index: 2;
    box-shadow: ${ props => palette ( props . palette === 'default' ? 'primary' : `${ props . palette }300` ) ( props ) } 0px 0px 0px
      2px;
  }

  &[disabled] {
    ${ disabledProperties };
  }

  & {
    ${ theme ( 'fannypack.Button.base' ) };
  }

  ${ props => props . palette === 'default' && css `
      border: 1px solid ${ palette ( 'gray100' ) };
    ` };

  & {
    ${ theme ( 'fannypack.Button.base' ) };
  }

  ${ props => props . styledSize && sizeProperties [ props . styledSize || '' ] };

  ${ props => props . isLoading && loadingProperties };
  ${ props => props . isStatic && staticProperties };
  ${ props => ( isInteractive ( props ) ? interactiveProperties : '' ) };

  ${ props => props . kind === 'outlined' && outlinedProperties };
  ${ props => props . kind === 'link' && linkProperties };
  ${ props => props . kind === 'ghost' && ghostProperties };
` ; export default Button ;