import {
  calculateTimeRemaining,
  formatCountdownTime,
  formatCountdownText,
} from "../widget/timer/countdownTimer";

export default function createWidgetHtml(theme, config) {
  const showCounter = config.showCounter;
  const timeRemaining = calculateTimeRemaining(config.endAt);
  const daysText = formatCountdownText(timeRemaining, config);
  const timeText = formatCountdownTime(timeRemaining);
  const themeText = config.text.replace(
    /<strong([^>]*)>/g,
    `<strong$1 style="color: ${theme.accentColor}; font-weight: 700;">`
  );

  return `
    <div class="firevert-promo-time-widget ${
      theme.shadow ? "firevert-promo-time-widget--box-shadow" : ""
    }" style="border-radius: ${theme.borderRadius}px !important;">
      <div class="firevert-promo-time-widget__container" style="background-color: ${
        theme.backgroundColor
      }; border-radius: ${theme.borderRadius}px !important;">
          <div class="firevert-promo-time-widget__top">
              <div class="firevert-promo-time-widget__top-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                  <g id="ico_promocja" data-name="ico promocja" transform="translate(9.96 9.96)">
                    <g id="ico_rabat" data-name="ico rabat" transform="translate(-9.96 -9.96)">
                      <path id="Ellipse_368" data-name="Ellipse 368" d="M11.877-.622a12.5,12.5,0,1,1-12.5,12.5A12.514,12.514,0,0,1,11.877-.622Zm0,23.438A10.938,10.938,0,1,0,.94,11.877,10.95,10.95,0,0,0,11.877,22.815Z" transform="translate(0.623 0.623)" fill="${
                        theme.accentColor
                      }"/>
                    </g>
                    <g id="Group_769" data-name="Group 769" transform="translate(-2.411 -2.411)">
                      <path id="Line_126" data-name="Line 126" d="M.159,9.28A.782.782,0,0,1-.394,7.945L7.945-.394A.782.782,0,1,1,9.051.712L.712,9.051A.779.779,0,0,1,.159,9.28Z" transform="translate(0.623 0.623)" fill="${
                        theme.accentColor
                      }"/>
                    </g>
                    <g id="Group_770" data-name="Group 770" transform="translate(-3.451 -3.451)">
                      <path id="Ellipse_369" data-name="Ellipse 369" d="M1.983-.622A2.606,2.606,0,1,1-.622,1.983,2.609,2.609,0,0,1,1.983-.622Zm0,3.648A1.042,1.042,0,1,0,.941,1.983,1.044,1.044,0,0,0,1.983,3.026Z" transform="translate(0.622 0.622)" fill="${
                        theme.accentColor
                      }"/>
                    </g>
                    <g id="Group_771" data-name="Group 771" transform="translate(3.319 3.319)">
                      <path id="Ellipse_370" data-name="Ellipse 370" d="M1.983-.622A2.606,2.606,0,1,1-.622,1.983,2.609,2.609,0,0,1,1.983-.622Zm0,3.648A1.042,1.042,0,1,0,.941,1.983,1.044,1.044,0,0,0,1.983,3.026Z" transform="translate(0.622 0.622)" fill="${
                        theme.accentColor
                      }"/>
                    </g>
                  </g>
                </svg>
              </div>
              <div class="firevert-promo-time-widget__top-text" style="color: ${
                theme.textColor
              };">
                ${themeText}
              </div>
              <div class="firevert-promo-time-widget__copy-button" data-copy="${
                config.couponCode
              }">
                  <svg id="ico_kopiuj" data-name="ico kopiuj" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                      <path id="Path_699" data-name="Path 699" d="M0,0H24V24H0Z" fill="none"/>
                      <path id="Path_700" data-name="Path 700" d="M7,7,7,9.667A2.667,2.667,0,0,1,9.667,7h8.666A2.667,2.667,0,0,1,21,9.667v8.666A2.667,2.667,0,0,1,18.333,21H9.667A2.667,2.667,0,0,1,7,18.333Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                      <path id="Path_701" data-name="Path 701" d="M4.012,16.737A2,2,0,0,1,3,15V5A2.006,2.006,0,0,1,5,3H15a1.606,1.606,0,0,1,1.5,1" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                  </svg>
                  <span class="firevert-promo-time-widget__copy-button-text" style="color: ${
                    theme.textColor
                  };">
                      ${config.copyText}
                  </span>
              </div>
          </div>
          <div class="firevert-promo-time-widget__bottom" style="display: ${
            showCounter ? "flex" : "none"
          };">
                <p class="firevert-promo-time-widget__bottom-text" style="color: ${
                  theme.textColor
                };">
                    ${daysText} <span class="firevert-promo-time-widget__bottom-text-time" style="background-color: ${
    theme.counterBackground
  }; color: ${theme.counterText};">${timeText}</span> ${config.promotionEndText}
                </p>
          </div>
        </div>
    </div>
    `;
}
