/**
 * @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-link')

export class Link extends LitElement {
  static override styles = css`
    :host{
        display: block;
        --iu-comp-bg: transparent;
        --iu-comp-color: var(--iu-color-black);
        --iu-comp-bg-hover: var(--iu-color-black);
        --iu-comp-color-hover: var(--iu-color-white);
        --iu-comp-border-color: var(--iu-color-grey-200);
        --iu-comp-border-color-hover: var(--iu-color-grey-500);
        // margin-bottom: var(--iu-spacing-3);
    }
    @media ${unsafeCSS(breakpoints.md)} {
        :host{
            // margin-bottom: var(--iu-spacing-6);
        }
    }
    a{
        background: var(--iu-comp-bg);
        color: var(--iu-comp-color);
        font: var(--iu-f-2);
        text-decoration: none;
        border-top: 1px solid var(--iu-comp-border-color);
        position: relative;
        display: flex;
    }
    a.size-2{
        font: var(--iu-f-lg);
    }
    a:hover{
        background: var(--iu-comp-bg-hover);
        color: var(--iu-comp-color-hover);
    }
    svg{
        width: 2.25rem;
        height: 2.25rem;
        margin-right: var(--iu-spacing-0);
        flex-shrink: 0;
    }
    .size-2 svg{
        width: 3.125rem;
        height: 3.125rem;
        margin-right: var(--iu-spacing-1);
    }
    a > span{
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        // padding-right: 1.25rem;
    }
    a span span{
        display: inline-block;
        font: var(--iu-f-0);
        color: var(--iu-color-grey-300);
        transform: translateY(-0.875rem);
    }
    iu-container{
        margin-bottom: 0;
    }
  `;

  @property() href?: string;
  @property() text?: string;
  @property() label?: string;
  @property() target?: string = "_self";
  @property({type: Number}) size = 1;
  @property({type: Boolean, reflect: true}) nested?: boolean = false;

  override render() {
    return html`
        <iu-container ?nested=${this.nested}>
            <a href="${this.href}" class="size-${this.size}" target="${this.target}">
                ${this.label
                ? html`
                    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="m21.082 16.215 12.257.471m0 0 .47 12.257m-.47-12.257L15.66 34.364" stroke="currentColor" stroke-width="2"/></svg>`
                : html`
                    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M28.667 16 37 25m0 0-8.333 9M37 25H12" stroke="currentColor" stroke-width="2"/></svg>`
                }
                <span>
                    ${this.text}
                    ${this.label && html`<span>${this.label}</span>`}
                </span>
            </a>
        </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-link': Link;
  }
}