/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-event')

export class Event extends LitElement {
  static override styles = css`
    :host{
      display: block;
    }
    .event{
      padding-top: var(--iu-spacing-2);
      padding-bottom: var(--iu-spacing-2);
      border-top: 1px solid var(--iu-color-grey-200);
      border-bottom: 1px solid var(--iu-color-grey-200);
    }
    @media ${unsafeCSS(breakpoints.md)} {
      .event{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--iu-grid-gutter);
      }
    }
    .date{
      grid-column: span 2 / span 2;
      font-weight: bold;
      font: var(--iu-f-md);
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      .date span{
        display: block;
      }
    }
    .day{
      margin-left: var(--iu-spacing-0);
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      .day{
        margin-left: 0;
      }
    }
    .info{
      grid-column: span 4 / span 4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font: var(--iu-f-md);
    }
    .info span{
      display: block;
    }
    .deadline{
      color: var(--iu-color-grey-300);
    }
    .place{
      font: var(--iu-f-1);
    }
    .content{
      grid-column: span 6 / span 6;
    }
    .title{
      font-weight: bold;
      font: var(--iu-f-md);
      margin-bottom: 0;
      text-decoration: none;
      color: var(--iu-color-black);
    }
    .subtitle{
      font-weight: bold;
      display: block;
      margin-top: var(--iu-spacing-0);
    }
    .excerpt{
      display: block;
      margin-top: var(--iu-spacing-2);
    }
  `;

  @property() weekday : string = '';
  @property() day : string = '';
  @property() time : string = '';
  @property() deadline? : string = '';
  @property() place : string = '';
  @property() href : string = '';
  @property() name : string = '';
  @property() subtitle? : string;
  @property() excerpt? : string;
  
  override render() {
    return html`
      <iu-container>
        <div class="event">
          <div class="date">
            <span class="weekday">${this.weekday}</span>
            <span class="day">${this.day}</span>
          </div>
          <div class="info">
            <div>
              <span class="time">${this.time == '' ? 'Tutto il giorno' : this.time }</span>
              ${this.deadline && html`<span class="deadline">Fino al ${this.deadline}</span>`}
            </div>
            <span class="place">${this.place}</span>
          </div>
          <div class="content">
            <a href="${this.href}" class="title">${this.name}</a>
            ${this.subtitle && html`<span class="subtitle">${this.subtitle}</span>`}
            ${this.excerpt && html`<span class="excerpt">${this.excerpt}</span>`}
          </div>
        </div>
      </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-event': Event;
  }
}