// @flow

import React, {Component} from 'react'
import resolveRoot from '../../desktop/resolve-root'
import {globalColorsDZ2} from '../styles/style-guide'
import type {Props} from './avatar'

const noAvatar = `file:///${resolveRoot('shared/images/icons/placeholder-avatar@2x.png')}`

export default class Avatar extends Component {
  props: Props;

  state: {
    avatarLoaded: boolean
  };

  constructor (props: Props) {
    super(props)
    this.state = {avatarLoaded: false}
  }

  render () {
    return (
      <div style={{position: 'relative'}}>
        <div
          style={{...avatarStyle(this.props.size),
            backgroundImage: `url('${noAvatar}')`,
            backgroundSize: 'cover',
            ...this.props.style
          }}/>
        <img
          src={this.props.url}
          style={{...avatarStyle(this.props.size),
            display: this.state.avatarLoaded ? 'block' : 'none',
            backgroundColor: globalColorsDZ2.white,
            ...this.props.style
          }}
          onLoad={() => this.setState({avatarLoaded: true})}/>
      </div>
    )
  }
}

function avatarStyle (size: number): Object {
  return {
    width: size,
    height: size,
    borderRadius: size / 2,
    position: 'absolute'
  }
}


@@ -488,24 +488,94 @@
 render () %7B%0A
+    const width = this.props.size%0A    const height = this.props.size%0A%0A
     return (
@@ -614,16 +614,52 @@
 elative'
+, width, height, ...this.props.style
 %7D%7D%3E%0A    
@@ -808,41 +808,8 @@
 ver'
-,%0A            ...this.props.style
 %0A   
@@ -980,16 +980,16 @@
 'none',%0A
+
         
@@ -1034,41 +1034,8 @@
 hite
-,%0A            ...this.props.style
 %0A   

Fix avatar on other pages.