import {
  DeesElement,
  property,
  html,
  customElement,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';

@customElement('bellini-header')
export class BelliniHeader extends DeesElement {
  public static demo = () => html`<bellini-header publicationName="central.eu"></bellini-header>`;

  @property()
  publicationName: string = 'no publication name set';

  @property()
  slogan: string = 'slogan not set';

  @property()
  twitterHandle: string;

  @property()
  facebookHandle: string;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
          position: relative;
          display: block;
          overflow: hidden;
          background: ${cssManager.bdTheme('#eeeeeb', '#000')};
        }
        :host([hidden]) {
          display: none;
        }

        .headerMain {
          background-repeat: no-repeat;
          background-position: center 0px;
          background-size: cover;
          color: #fff;
          position: relative;
          z-index: 1;
        }

        /* PAGESPACER */
        .gridContainer {
          position: relative;
          max-width: var(--lelecv-pagewidth, 1200px);
          display: grid;
          grid-template-columns: ${cssManager.cssGridColumns(4, 15)};
          grid-gap: 15px;
          margin: auto;
          z-index: 100;
          padding-top: 30px;
          padding-bottom: 15px;
        }

        .gridTile {
          background: ${cssManager.bdTheme('#fafafa', '#333333')};
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          position: relative;
          overflow: hidden;
          border-radius: 3px;
        }

        .gridTile .heading {
          text-align: center;
          margin: 5px;
          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
          color: ${cssManager.bdTheme('#333', '#fff')};
          padding: 5px;
          border-radius: 3px;
        }

        .gridTile .selectionGridContainer {
          display: grid;
          grid-template-columns: ${cssManager.cssGridColumns(2, 5)};
          grid-gap: 5px;
          padding: 0px 5px 5px 5px;
        }

        .gridTile .selectionGridContainer a {
          display: contents;
          text-decoration: none;
        }

        .gridTile .selectionGridContainer .selectionItem {
          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
          color: ${cssManager.bdTheme('#333', '#fff')};
          height: 120px;
          border-radius: 3px;
          overflow: hidden;
          cursor: pointer;
          padding: 0px 8px 0px 8px;
        }

        .gridTile .selectionGridContainer .selectionItem:hover {
          background: ${cssManager.bdTheme('#ccc', '#000')};
        }

        .gridTile .selectionGridContainer .selectionItem dees-icon {
          text-align: center;
          display: block;
          margin: auto;
          margin-top: 35px;
        }

        .gridTile .selectionGridContainer .selectionItem .text {
          text-align: center;
          display: block;
          margin: auto;
          margin-top: 8px;

        }

        .logo {
          background: ${cssManager.bdTheme('#222222', '#000000')};
          border: 1px solid ${cssManager.bdTheme('#222222', '#333333')};
          text-align: center;
          position: relative;
        }

        .logo img {
          display: block;
          margin: auto;
          margin-top: -20px;
          margin-bottom: 20px;
          width: 100%;
        }

        .logo .slogan {
          position: absolute;
          display: block;
          top: 77%;
          left: 0px;
          width: 100%;
          font-size: 25px;
          font-weight: 100;
          font-family: 'Exo 2', monospace;
        }

        
        ${cssManager.cssForNotebook(css`
          .gridContainer {
            margin-left: 15px;
            margin-right: 15px;
          }
        `)}

        ${cssManager.cssForTablet(css`
          .gridContainer {
            grid-template-columns: ${cssManager.cssGridColumns(3, 15)};
          }

          .gridTile.know-us {
            display: none;
          }

          .gridTile .selectionGridContainer .selectionItem {
            height: 135px;
          }

          .gridTile .selectionGridContainer .selectionItem dees-icon {
            margin-top: 40px;
          }
        `)}

        ${cssManager.cssForPhablet(css`
          .gridContainer {
            grid-template-columns: repeat(1, calc(100% - 0px));
          }

          .gridContainer .logo img {
            margin-top: -20%;
            margin-bottom: -37%;
          }

          .gridTile.us {
            height: auto;
            grid-column: auto;
          }
          .gridTile.social {
            display: none;
          }
          .gridTile.us.know-us {
            display:none;
          }

          .gridTile.us .selectionGridContainer {
            grid-template-columns: ${cssManager.cssGridColumns(3, 5)};
          }

          .gridTile.us .selectionGridContainer .selectionItem {
            padding: 0px;
            height: 40px;
          }

          .gridTile.us .selectionGridContainer .selectionItem dees-icon {
            margin-top: 8px;
          }

          .gridTile.us .selectionGridContainer .selectionItem .text {
            display: none;
          }
        `)}
    `
  ];

  public render(): TemplateResult {
    return html`
      <style>
      </style>
      <div class="headerMain">
        <div class="gridContainer">
          <div class="gridTile logo">
            <img
              src="https://assetbroker.lossless.one/brandfiles/00general/square_${this.publicationName.replace(
                '.',
                ''
              )}.svg"
            />
            <div class="slogan">${this.slogan}</div>
          </div>
          <div class="gridTile us">
            <div class="heading">read us across the web:</div>
            <div class="selectionGridContainer">
              <a
                href="${this.domtools
                  ? 'https://feedly.com/i/subscription/feed/https://' +
                    window.location.hostname +
                    '/feed'
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="rss"></dees-icon>
                  <div class="text">Feedly</div>
                </div>
              </a>
              <a
                href="${this.domtools
                  ? this.domtools.websetup.options.metaObject.googleNewsLink
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="google"></dees-icon>
                  <div class="text">Google News</div>
                </div>
              </a>
              <a
                href="${this.domtools
                  ? this.domtools.websetup.options.metaObject.mediumLink
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="medium"></dees-icon>
                  <div class="text">Medium</div>
                </div>
              </a>
            </div>
          </div>
          <div class="gridTile us social">
            <div class="heading">${this.publicationName} on social networks:</div>
            <div class="selectionGridContainer">
              <a
                href="${this.domtools
                  ? 'https://twitter.com/' + this.domtools.websetup.options.metaObject.twitterHandle
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="twitter"></dees-icon>
                  <div class="text">Twitter</div>
                </div>
              </a>
              <a
                href="${this.domtools
                  ? 'https://fb.com/' + this.domtools.websetup.options.metaObject.facebookHandle
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="facebook"></dees-icon>
                  <div class="text">Facebook</div>
                </div>
              </a>
            </div>
          </div>

          <div class="gridTile us know-us">
            <div class="heading">get to know us:</div>
            <div class="selectionGridContainer">
              <a
                href="${this.domtools
                  ? this.domtools.websetup.options.metaObject.companyWebsiteLink
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="desktop"></dees-icon>
                  <div class="text">Company Website</div>
                </div>
              </a>
              <a
                href="${this.domtools
                  ? this.domtools.websetup.options.metaObject.slackLink
                  : null}"
                target="_blank"
              >
              </a>
              <a
                href="https://jobs.lossless.com"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon svgSize="25" brandName="users"></dees-icon>
                  <div class="text">Join Our Team</div>
                </div>
              </a>
              <a
                href="${this.domtools
                  ? this.domtools.websetup.options.metaObject.airmeetLink
                  : null}"
                target="_blank"
              >
                <div class="selectionItem">
                  <dees-icon style="font-size: 25px;" iconName="live_help"></dees-icon>
                  <div class="text">Support</div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <slot></slot>
      </div>
    `;
  }
}