function getUrl(url = '', prefix = '') {
  return url.length === 32 ? `${prefix}${url}` : url;
}

function replacePx(val) {
  val = `${val || ''}`;
  return +(val).replace('px', '');
}

function sizeToRem(val) {
  return `${replacePx(val) / 50}rem`;
}

function getAvatarUrl(componentData, userInfo, prefix, defaultUrl) {
  const { avatar } = userInfo || {};
  const { componentExtInfo } = componentData;
  const { defaultAvatar } = componentExtInfo || {};
  return getUrl(avatar || defaultAvatar || defaultUrl, prefix);
}

/*
* 获取背景颜色和背景图
* */
function getBackground(componentData, prefix) {
  const styles = [];
  const { componentExtInfo } = componentData;
  const {
    backgroundUrl,
    backgroundColor,
  } = componentExtInfo || {};
  if (backgroundColor) styles.push(`backgroundColor:${backgroundColor}`);
  if (backgroundUrl) styles.push(`backgroundImage:url(${getUrl(backgroundUrl, prefix)})`);

  return styles.join(';');
}

/*
* 获取用户名的字体颜色
* */
function getNameFontStyle(componentData) {
  const styles = [];
  const { componentExtInfo } = componentData;
  const {
    nameColor,
  } = componentExtInfo || {};

  if (nameColor) {
    styles.push(`color: ${nameColor}`);
  }
  return styles.join(';');
}

/*
* 获取电话的字体颜色
* */
function getPhoneFontStyle(componentData) {
  const styles = [];
  const { componentExtInfo } = componentData;
  const {
    phoneNumberColor,
  } = componentExtInfo || {};

  if (phoneNumberColor) {
    styles.push(`color: ${phoneNumberColor}`);
  }
  return styles.join(';');
}

function getAuthFrameStyle(componentData) {
  const styles = [];
  const { componentExtInfo } = componentData;
  const {
    authButtonColor,
    authButtonFontColor,
    authButtonBackgroundColor,
  } = componentExtInfo || {};

  if (authButtonColor) {
    styles.push(`borderColor:${authButtonColor}`);
  }

  if (authButtonFontColor) {
    styles.push(`color:${authButtonFontColor}`);
  }

  if (authButtonBackgroundColor) {
    styles.push(`backgroundColor:${authButtonBackgroundColor}`);
  }
  return styles.join(';');
}

function getAuthButtonName(componentData) {
  const { componentExtInfo } = componentData;
  const {
    authButtonContext = '',
  } = componentExtInfo || {};
  return authButtonContext;
}

export default {
  getAvatarUrl,
  getBackground,
  getNameFontStyle,
  getAuthFrameStyle,
  getPhoneFontStyle,
  getAuthButtonName,
};
