import * as React from 'react'
import { compose, DataValue } from 'react-apollo'
import { withAsset } from '../graphql'
import { getAsset, getAssetVariables } from '../graphql/types/getAsset'
import { Icon } from 'antd'

interface ChildData {
  asset: DataValue<getAsset, getAssetVariables>
}

interface IProps {
  id?: string
  size: number
}

class AssetIcon extends React.Component<IProps & ChildData> {
  render() {
    const { id, asset, size } = this.props;

    if (!id || !asset || asset.loading) {
      return <Icon type="loading" />
    }

    return (
      <span style={{ height: `${size}px`, width: `${size}px` }}>
        <img
          style={{ maxWidth: `${size}px`, maxHeight: `${size}px` }}
          src={`data:image/png;base64,${asset.asset.content}`}
        />
      </span>
    )
  }
}

export default compose(withAsset)(AssetIcon)
