let usedColors = []
let colors = [
  '1788FB',
  '4BBEC6',
  'FBC22D',
  'FA3C52',
  'D696B8',
  '689BCA',
  '26CC2B',
  'FD7E35',
  'E38587',
  '774DFB',
  '31CDF3',
  '6AB76C',
  'FD5FA1',
  'A697C5'
]

function usePictureLoad (baseUrls, entity, isPerson) {
  if (entity !== null) {
    let name = isPerson === true ? entity.firstName + ' ' + entity.lastName : entity.name
    if (typeof name !== 'undefined') {
      entity.pictureThumbPath = entity.pictureThumbPath || imageFromText(baseUrls, name)
      return entity.pictureThumbPath
    }
  }
}

function  getNameInitials (name) {
  return name.split(' ').map((s) => s.charAt(0)).join('').toUpperCase().substring(0, 3).replace(/[^\w\s]/g, '')
}

function imageFromText (baseUrls, name, entity = {}, error = false) {
  let initials = getNameInitials(name)
  let colorIndex = Math.floor(Math.random() * colors.length)
  let colorHex = colors[colorIndex]
  usedColors.push(colors[colorIndex])
  colors.splice(colorIndex, 1)
  if (colors.length === 0) {
    colors = usedColors
    usedColors = []
  }
  if (error) {
    if (entity.firstName) {
      return baseUrls.wpAmeliaPluginURL + 'public/img/default-employee.svg'
    }
    if (entity.latitude) {
      return baseUrls.wpAmeliaPluginURL + 'public/img/default-location.svg'
    }
    return baseUrls.wpAmeliaPluginURL + 'public/img/default-service.svg'
  }

  // Make canvas
  const canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');

  // Draw background color
  ctx.fillStyle = `#${colorHex}` // Background color
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Draw initials text
  ctx.font = '40px Arial';
  ctx.fillStyle = '#ffffff'; // Text color
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(initials, canvas.width / 2, canvas.height / 2);

  // Convert canvas to data URL (as image source)
  return canvas.toDataURL('image/png');
}

export {
  usePictureLoad,
  getNameInitials
}