import badgeImages from '../../assets/badge/badgeImageData.json';
import { getPositionStyles } from './badgeUtils';

export const generateImageBadgeHtml = (badge_settings) => {
  const timeStamp = Date.now();
  const class_name = badge_settings.class ? badge_settings.class : '';
  const image_url =
    badge_settings.type === 'default'
      ? `${CPBW.badge_image_file}${badge_settings?.image?.src}`
      : badge_settings.uploadedUrl;

  return `<div class="cpbw_badge_image_container_${timeStamp}">
      <img class="cpbw_badge_image_${timeStamp} ${class_name}" src="${image_url}" />

    <style>
      .cpbw_badge_image_container_${timeStamp} {
        margin-top:${badge_settings.marginTop}px;
        margin-right:${badge_settings.marginRight}px;
        margin-bottom:${badge_settings.marginBottom}px;
        margin-left:${badge_settings.marginLeft}px;
        position: absolute;
        ${getPositionStyles(badge_settings.position)}
        z-index: ${badge_settings.zIndex};
        height: auto;
        width: ${badge_settings.width}px;
        opacity: ${badge_settings.opacity / 100};
      }

      .cpbw_badge_image_${timeStamp} {
        height: auto;
        width: ${badge_settings.width}px;
        object-fit: contain;
      }
    </style>
  </div>`;
};

export const imageBadgeDefaultSettings = {
  position: 'top-right',
  selectedBadgeGroup: Object.keys(badgeImages.badges)[0],
  image: badgeImages.badges[Object.keys(badgeImages.badges)[0]][0],
  width: 50,
  opacity: 100,
  marginTop: 8,
  marginRight: 8,
  marginBottom: 8,
  marginLeft: 8,
  type: 'default',
  uploadedUrl: '',
  zIndex: 90,
};
