import { getPositionStyles } from './badgeUtils';

export const generateCountdownBadge = (badge_settings) => {
  const timeStamp = Date.now();
  const class_name = badge_settings.class ? badge_settings.class : ' ';
  return `<div class="cpbw-badge-container-${timeStamp}">
    <div class="cpbw-countdown cpbw-badge-content-${timeStamp} ${class_name}"
    data-text="${badge_settings.text}" data-end="${badge_settings.endTime}"></div>

  <style>
    .cpbw-badge-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};
    }

    .cpbw-badge-content-${timeStamp} {
        color: ${badge_settings.color};
        background: ${badge_settings.background};

        ${
          badge_settings.padding
            ? `padding-top: ${badge_settings.paddingTop}px;
               padding-right: ${badge_settings.paddingRight}px;
               padding-bottom: ${badge_settings.paddingBottom}px;
               padding-Left: ${badge_settings.paddingLeft}px; `
            : `height: ${badge_settings.height}px;
               width: ${badge_settings.width}px;`
        }
        
        border-top-left-radius: ${badge_settings.borderTopLeftRadius}px;
        border-top-right-radius: ${badge_settings.borderTopRightRadius}px;
        border-bottom-left-radius: ${badge_settings.borderBottomLeftRadius}px;
        border-bottom-right-radius: ${badge_settings.borderBottomRightRadius}px;
        font-size: ${badge_settings.fontSize}px;
        font-weight: ${badge_settings.fontWeight};
        border: ${badge_settings.borderWidth}px solid ${badge_settings.borderColor};
      }
  </style>
  </div>`;
};

const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
const nextWeekDate = nextWeek.toISOString().slice(0, 16);

export const defaultCountdownBadgeSettings = {
  position: 'top-right',
  color: '#ffffff',
  background: 'linear-gradient(90deg, RGB(47, 232, 53) 0%, rgba(11,194,219,1) 100%)',
  height: 34,
  width: 110,
  marginTop: 8,
  marginRight: 8,
  marginBottom: 8,
  marginLeft: 8,
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  borderBottomLeftRadius: 0,
  borderBottomRightRadius: 0,
  padding: false,
  paddingTop: 6,
  paddingRight: 16,
  paddingBottom: 6,
  paddingLeft: 16,
  fontSize: 14,
  fontWeight: 700,
  borderWidth: 0,
  borderColor: 'rgb(49, 174, 188)',
  zIndex: 90,
  endTime: nextWeekDate,
};
