import _Avatar from 'reakit/Avatar' ; import { palette , theme } from 'styled-tools' ; import styled , { css } from '../styled' ; import { Box } from '../primitives' ; import { AvatarProps } from './Avatar' ; export const circleProperties = css `
  & {
    border-radius: 50%;
  }
` ; export const fitProperties = ( props ) => { if ( ! props . fit ) return null ; if ( props . fit === 'contain' ) { return css `
      object-fit: contain;
      ${ ( props ) => props . fitPosition ? css `
              object-position: ${ props . fitPosition };
            ` : '' };

      ${ theme ( 'fannypack.Avatar.fit.base' ) };
      ${ theme ( 'fannypack.Avatar.fit.contain' ) };
    ` ; } if ( props . fit === 'cover' ) { return css `
      object-fit: cover;
      ${ ( props ) => props . fitPosition ? css `
              object-position: ${ props . fitPosition };
            ` : '' };

      ${ theme ( 'fannypack.Avatar.fit.base' ) };
      ${ theme ( 'fannypack.Avatar.fit.cover' ) };
    ` ; } return null ; } ; export const sizeProperties = { xsmall : css `
    & {
      font-size: 8px;
      width: 20px;
      height: 20px;
    }
    & {
      ${ theme ( 'fannypack.Avatar.sizes.xsmall' ) };
    }
  ` , small : css `
    & {
      font-size: 16px;
      width: 40px;
      height: 40px;
    }
    & {
      ${ theme ( 'fannypack.Avatar.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Avatar.sizes.default' ) };
    }
  ` , medium : css `
    & {
      font-size: 32px;
      width: 80px;
      height: 80px;
    }
    & {
      ${ theme ( 'fannypack.Avatar.sizes.medium' ) };
    }
  ` , large : css `
    & {
      font-size: 48px;
      width: 100px;
      height: 100px;
    }
    & {
      ${ theme ( 'fannypack.Avatar.sizes.large' ) };
    }
  ` } ; export const AvatarCircle = styled ( Box ) < AvatarProps & { styledSize : any ; } > `
  align-items: center;
  background-color: ${ ( props ) => palette ( props . palette || '' ) ( props ) };
  color: ${ ( props ) => ( props . color ? props . color : palette ( `${ props . palette }Inverted` ) ( props ) ) };
  display: flex;
  justify-content: center;
  font-size: 24px;
  height: ${ ( props ) => ( typeof props . styledSize === 'number' ? `${ props . styledSize }px` : '60px' ) };
  width: ${ ( props ) => ( typeof props . styledSize === 'number' ? `${ props . styledSize }px` : '60px' ) };

  ${ ( props ) => props . kind === 'circle' && circleProperties };
  ${ ( props ) => ( typeof props . styledSize === 'string' ? sizeProperties [ props . styledSize ] : null ) };

  ${ theme ( 'fannypack.Avatar.Circle.base' ) };
` ; const AvatarImage = styled ( _Avatar ) < AvatarProps & { styledSize : any ; } > `
  font-size: 24px;
  height: ${ ( props ) => ( typeof props . styledSize === 'number' ? `${ props . styledSize }px` : '60px' ) };
  width: ${ ( props ) => ( typeof props . styledSize === 'number' ? `${ props . styledSize }px` : '60px' ) };
  ${ ( props ) => props . kind === 'circle' && circleProperties };
  ${ ( props ) => ( typeof props . styledSize === 'string' ? sizeProperties [ props . styledSize ] : null ) };

  & {
    ${ fitProperties };
  }

  ${ theme ( 'fannypack.Avatar.Image.base' ) };
` ; export default AvatarImage ;