import { Observable } from 'rxjs'
import { includes } from 'lodash'
const gravatar = require('gravatar')

const HOSTED_EMAIL_DOMAINS = [
  'gmail.com',
  'yahoo.com',
]

const AVATAR_SIZE = 200

export const fetchGravatar = (email: string) => {
  const src = gravatar.url(email, { s: AVATAR_SIZE, d: '404' }, true)
  const promise = new Promise((resolve, reject) => {
    const img = document.createElement('img')
    img.crossOrigin = 'Anonymous'
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.height = img.naturalHeight
      canvas.width = img.naturalWidth
      ctx.drawImage(img, 0, 0)
      resolve({ url: src, dataUrl: canvas.toDataURL() })
    }
    img.onerror = () => reject(new Error('NotFound'))
    img.src = src
  })
  return Observable.fromPromise(promise)
}

export const fetchCompanyLogo = (domain: string) => {
  if (includes(HOSTED_EMAIL_DOMAINS, domain)) {
    return Observable.fromPromise(Promise.reject(new Error('HostedEmailDomain')))
  }

  const src = `https://logo.clearbit.com/${domain}?size=${AVATAR_SIZE}`
  const promise = new Promise((resolve, reject) => {
    const img = document.createElement('img')
    img.crossOrigin = 'Anonymous'
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.height = img.naturalHeight
      canvas.width = img.naturalWidth
      ctx.drawImage(img, 0, 0)
      resolve({ url: src, dataUrl: canvas.toDataURL() })
    }
    img.onerror = () => reject(new Error('NotFound'))
    img.src = src
  })
  return Observable.fromPromise(promise)
}