import { html, LitElement, css, TemplateResult } from 'lit';
import { Config } from './Config.js';
/* eslint-disable */
import { property } from 'lit/decorators.js';
/* eslint-enable */

export class HonorlockElementsElement extends LitElement {
  @property({ type: Config })
  configs: Config[] = window.HonorlockElements.getConfigurations();

  static styles = css`
    iframe {
      background-color: white;
      border: 0;
    }

    #error-wrapper {
      box-sizing: border-box;
      position: relative;
      max-width: 100%;
      width: 600px;
      height: 800px;
      background: #f7f8f9;
      box-shadow: 0 0 24px rgba(21, 38, 81, 0.15);
      font-family: 'Open Sans', sans-serif;
    }

    #error-wrapper * {
      box-sizing: inherit;
    }

    #error-header {
      height: 64px;
      background: #2272ce;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #error-header-honorlock-text {
      margin-left: 0.625rem;
    }

    #error-body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 32px 32px 44px;
      gap: 8px;
      position: absolute;
      max-width: 100%;
      width: 344px;
      height: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      box-shadow: 0 0 11px rgba(21, 38, 81, 0.05);
      border-radius: 8px;
    }

    #error-body-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
    }

    #error-body-header h1 {
      margin: 0;
      font-style: normal;
      font-weight: 700;
      font-size: 48px;
      line-height: 64px;
      color: #282828;
    }

    #error-body-errors {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      gap: 4px;
    }

    #error-body-errors-header {
      display: flex;
      align-items: center;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4px;
    }

    #error-body-errors-header h2 {
      margin: 0;
      color: #282828;
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
    }

    .error-list-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .error-list-message {
      max-width: 90%;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 12px;
      flex: none;
      order: 1;
      flex-grow: 0;
      align-items: center;
      color: #424242;
    }
  `;

  render() {
    const { key } = this.dataset;

    const { config } = this.configs.find(
      conf => conf.config.key === (key ?? 'default')
    ) as Config;

    const endPoint = `https://${config.host}/widget/launch`;
    const url = `${endPoint}/${config.context.type}/${
      config.context.id
    }/?token=${config.token}&showHeader=${config.showHeader}&showLivechat=${
      config.showLivechat
    }${
      config.defaultSessionViewerOrientation
        ? `&defaultSessionViewerOrientation=${config.defaultSessionViewerOrientation}`
        : ''
    }`;

    const validation = window.HonorlockElements.getValidation();
    const errorToDisplay =
      config.debug === true
        ? validation.errors
        : [
            'Honorlock is not configured correctly. Please contact your software integration administrator.',
          ];
    if (validation.errors.length > 0) {
      return HonorlockElementsElement.renderTheErrorView(errorToDisplay);
    }

    return html`
      <iframe
        id="honorlock-frame"
        src=${url}
        title="Honorlock Elements"
        width=${config.width}
        height=${config.height}
      ></iframe>
    `;
  }

  private static renderTheErrorView(errors: Array<string>): TemplateResult<1> {
    let list: string = '';

    errors.forEach((item: string) => {
      list += `<div class="error-list-wrapper">
                    <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.786 0.660038C8.2993 -0.220013 9.61327 -0.220013 10.1266 0.660038L16.7818 12.0703C17.2854 12.9335 16.6385 14 15.6117 14H2.30089C1.27403 14 0.627184 12.9335 1.13072 12.0703L7.786 0.660038ZM8 5C8 4.44771 8.44775 4 9 4C9.55225 4 10 4.44771 10 5V8C10 8.55229 9.55225 9 9 9C8.44775 9 8 8.55229 8 8V5ZM10 11C10 11.5523 9.55225 12 9 12C8.44775 12 8 11.5523 8 11C8 10.4477 8.44775 10 9 10C9.55225 10 10 10.4477 10 11Z" fill="#D24146"/>
                    </svg>
                    <p class="error-list-message">${item}</p>
                 </div>`;
    });

    const validationWrapper = document.createElement('div');
    validationWrapper.id = 'error-body-errors';
    validationWrapper.innerHTML = list;

    return html`
      <div id="error-wrapper">
        <div id="error-header">
          <svg
            width="28"
            height="32"
            viewBox="0 0 28 32"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.3796 17.3357C11.1909 16.014 9.86878 14.8578 8.44088 13.8913L7.32143 15.056C9.18881 16.597 10.7381 18.8268 12.7512 22C14.434 18.3787 17.1684 13.1692 20.0119 10.635L18.9094 9C16.1532 11.4567 13.5428 15.056 12.3796 17.3357Z"
              fill="white"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.92857 6.2629V17C2.92857 19.6831 4.81591 22.6752 7.66981 25.2479C9.02983 26.4739 10.4632 27.4674 11.6825 28.1389C12.3027 28.4805 12.9705 28.8405 13.6667 28.991C14.3628 28.8405 15.0306 28.4805 15.6508 28.1389C16.8701 27.4674 18.3035 26.4739 19.6635 25.2479C22.5174 22.6752 24.4048 19.6831 24.4048 17V6.2629L13.6667 3.12005L2.92857 6.2629ZM13.6667 0L0 4V17C0 25 10.7381 32 13.6667 32C16.5952 32 27.3333 25 27.3333 17V4L13.6667 0Z"
              fill="white"
            />
          </svg>
          <svg
            id="error-header-honorlock-text"
            width="126"
            height="21"
            viewBox="0 0 126 21"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M75.4513 0V20.6508H79.1175V0H75.4513Z" fill="white" />
            <path
              d="M65.2444 20.6508V7.76976H68.7978V8.81143C69.8146 7.79748 71.3365 7.46027 72.3511 7.46027H73.1899L72.3511 10.9779H71.8145C70.1528 10.9779 68.7978 12.2713 68.7978 13.8211V20.6578L65.2444 20.6508Z"
              fill="white"
            />
            <path
              d="M43.5543 20.6507V13.7587C43.5904 12.2689 42.2579 11.0009 40.8194 11.0563C39.3831 11.0356 38.0799 12.2851 38.0845 13.7587V20.6507H34.5581V7.76968H38.0845V8.69817C40.7202 6.04897 45.4302 8.16463 46.6455 11.3589C46.88 11.8024 47.1009 13.0496 47.1009 13.7933C47.1009 14.5347 47.1122 20.6577 47.1122 20.6577L43.5543 20.6507Z"
              fill="white"
            />
            <path
              d="M120.649 20.6508L116.164 14.9413L115.008 16.1239V20.6531H111.341V0H115.008V11.1696L118.561 7.76282H123.553L118.703 12.3799L125.048 20.6508H120.649Z"
              fill="white"
            />
            <path
              d="M12.0248 8.8067V0.618896H15.8036V20.653H12.0248V12.5784H3.87184V20.6507H0.0952454V0.618896H3.87184V8.8067H12.0248Z"
              fill="white"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M25.3116 7.4903C21.5869 7.4903 18.5679 10.509 18.5679 14.2322C18.5679 17.9554 21.5869 20.9742 25.3116 20.9742C29.0364 20.9742 32.0554 17.9554 32.0554 14.2322C32.0554 10.509 29.0364 7.4903 25.3116 7.4903ZM25.35 17.5859C23.4425 17.5859 21.8958 16.043 21.8958 14.1375C21.8958 12.2344 23.4425 10.6892 25.35 10.6892C27.2574 10.6892 28.8041 12.2321 28.8041 14.1375C28.8041 16.043 27.2574 17.5859 25.35 17.5859Z"
              fill="white"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M49.1549 14.2322C49.1549 10.509 52.174 7.4903 55.8987 7.4903C59.6234 7.4903 62.6425 10.509 62.6425 14.2322C62.6425 17.9554 59.6234 20.9742 55.8987 20.9742C52.174 20.9742 49.1549 17.9554 49.1549 14.2322ZM52.4851 14.1375C52.4851 16.043 54.0318 17.5859 55.9393 17.5859C57.8467 17.5859 59.3935 16.043 59.3935 14.1375C59.3935 12.2344 57.8467 10.6892 55.9393 10.6892C54.0318 10.6892 52.4851 12.2344 52.4851 14.1375Z"
              fill="white"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M88.6457 7.4903C84.921 7.4903 81.902 10.509 81.902 14.2322C81.902 17.9554 84.921 20.9742 88.6457 20.9742C92.3705 20.9742 95.3895 17.9554 95.3895 14.2322C95.3895 10.509 92.3705 7.4903 88.6457 7.4903ZM88.6841 17.5859C86.7766 17.5859 85.2299 16.043 85.2299 14.1375C85.2299 12.2344 86.7766 10.6892 88.6841 10.6892C90.5915 10.6892 92.1383 12.2321 92.1383 14.1375C92.1405 16.043 90.5938 17.5859 88.6841 17.5859Z"
              fill="white"
            />
            <path
              d="M103.486 7.49268C105.86 7.49268 107.939 8.78379 109.093 10.717L106.383 12.8211C105.887 11.6131 104.525 10.7701 103.448 10.7701C101.678 10.7701 100.244 12.3037 100.244 14.1954C100.244 16.087 101.678 17.6206 103.448 17.6206C105.112 17.6206 106.135 16.1124 106.374 15.5927L109.154 17.6483C108.011 19.6393 105.901 20.9766 103.486 20.9766C99.8583 20.9766 96.9159 17.9578 96.9159 14.2346C96.9159 10.5114 99.856 7.49268 103.486 7.49268Z"
              fill="white"
            />
          </svg>
        </div>
        <div id="error-body">
          <div id="error-body-header">
            <h1>Oh no!</h1>
          </div>
          <div id="error-body-errors-wrapper">
            <div id="error-body-errors-header">
              <h2>The Honorlock widget failed to load.</h2>
            </div>
            ${validationWrapper}
          </div>
        </div>
      </div>
    `;
  }
}

declare global {
  interface Window {
    HonorlockElements: any;
  }
}