profile-picture: Default

const PROFILEPICTURE = ((w, d, undefined) => {

  "use strict";

  const selectors = {
    wrapper: '.profile-picture',
    visual: '.profile-picture__visual',
    file: '.profile-picture__file',
    delete: '.profile-picture__btn--delete',
    form: '.profile-picture__form',
    messages: '.profile-picture__messages',
    successMessage: '.profile-picture__message--success',
    errorMessage: '.profile-picture__message--error',
  };

  const classes = {
    withImage: 'profile-picture--with-image',
    withoutImage: 'profile-picture--without-image',
    showMessages: 'profile-picture__messages--show',
    hidden: 'hidden',
  };

  const messageSeconds = 4000;

  let defaultPhoto;

  const init = () => {
    [...d.querySelectorAll(selectors.wrapper), ...[]].forEach(wrapper => {
      const visual = wrapper.querySelector(selectors.visual);
      const file = wrapper.querySelector(selectors.file);
      const form = wrapper.querySelector(selectors.form);
      const messages = wrapper.querySelector(selectors.messages);
      const successMessage = wrapper.querySelector(selectors.successMessage);
      const errorMessage = wrapper.querySelector(selectors.errorMessage);

      if (!visual || !file || !form) {
        return;
      }

      defaultPhoto = visual.dataset.default;

      window.gigya.accounts.getAccountInfo({
        callback: d => {
          let picture = (d && d.profile && d.profile.photoURL && d.profile.photoURL.length) ? d.profile.photoURL : defaultPhoto;
          updateVisual(wrapper, visual, picture);
        },
      });

      file.addEventListener('change', e => {
        if (file.files && file.files.length) {
          const fileReader = new FileReader();
          fileReader.readAsDataURL(file.files[0]);
          fileReader.onload = data => {
            const photoBytes = data.target.result.split(',')[1];
            window.gigya.accounts.setProfilePhoto({
              publish: true,
              photoBytes: photoBytes,
              APIKey: window.gigya.apiKey,
              callback: r => {
                if (r.errorMessage === 'OK') {
                  window.gigya.accounts.getAccountInfo({
                    callback: d => {
                      if (d && d.profile && d.profile.photoURL && d.profile.photoURL.length) {
                        updateVisual(wrapper, visual, d.profile.photoURL);
                        showMessage(messages, successMessage, errorMessage, !!d.profile.photoURL.length);
                      }
                    },
                  });
                }
              },
            });
          };
        }
      });

      const del = wrapper.querySelector(selectors.delete);
      if (del) {
        del.addEventListener('click', e => {
          e.preventDefault();
          setDefaultPhoto(wrapper, visual, file);
        });
      }
    });
  };

  const setDefaultPhoto = async function(wrapper, visual, file) {
    let blob = await fetch(defaultPhoto)
      .then(r => r.blob())
      .catch(e => console.log('Fetch error:', e));

    let dataUrl = await new Promise(resolve => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });

    dataUrl = dataUrl.split(',')[1] ?? dataUrl.split(';')[1] ?? dataUrl;

    window.gigya.accounts.setProfilePhoto({
      publish: true,
      photoBytes: dataUrl,
      APIKey: window.gigya.apiKey,
      callback: setProfileResponse => {
        if (setProfileResponse.errorMessage === 'OK') {
          window.gigya.accounts.getAccountInfo({
            callback: getAccountResponse => {
              if (getAccountResponse && getAccountResponse.profile && getAccountResponse.profile.photoURL) {
                clearVisual(wrapper, visual, file, getAccountResponse.profile.photoURL);
              }
            },
          });
        }
      },
    });
  };

  const updateVisual = (wrapper, visual, url) => {
    if (!wrapper || !visual || !url) {
      throw new Error('Could not update profile picture visual.');
    }

    wrapper.classList.remove(classes.withoutImage);
    wrapper.classList.add(classes.withImage);
    visual.style.backgroundImage = "url('" + url + "')";
  };

  const clearVisual = (wrapper, visual, file, url) => {
    if (!wrapper || !visual || !file || !url) {
      throw new Error('Could not clear profile picture visual.');
    }

    wrapper.classList.remove(classes.withImage);
    wrapper.classList.add(classes.withoutImage);
    visual.style.backgroundImage = "url('" + url + "')";
    file.value = '';
  };

  let timeout = 0;

  const showMessage = (wrapper, successMessageItem, errorMessageItem, success) => {
    if (!wrapper || !successMessageItem || !errorMessageItem) {
      return;
    }

    const showItem = !!success ? successMessageItem : errorMessageItem;
    showItem.classList.remove(classes.hidden);
    wrapper.classList.add(classes.showMessages);

    clearTimeout(timeout || 0);
    timeout = setTimeout(() => {
      wrapper.classList.remove(classes.showMessages);
      successMessageItem.classList.add(classes.hidden);
      errorMessageItem.classList.add(classes.hidden);
    }, messageSeconds);
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);