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

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

/**
 * An example element.
 *
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */

@customElement('iu-button')

export class Button extends LitElement {
  static override styles = css`
    a, button{
      position: relative;
      display: inline-flex;
      align-items: center;
      background: var(--iu-color-grey-100);
      padding: 0.375rem 0.75rem;
      color: var(--iu-color-black);
      text-decoration: none;
      border: 0;
      font: var(--iu-f-sm);
    }
    a:hover, button:hover{
      background: var(--iu-color-black);
      color: var(--iu-color-white);
    }
    a:not(.icon-none), button:not(.icon-none){
      padding: 0.375rem 0.75rem 0.375rem 2.5rem;
    }
    .icon-download::before{
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23000'/%3E%3C/svg%3E");
      width: 2.25rem;
      aspect-ratio: 1/1;
      background-repat: no-repeat;
      background-position: center center;
      position: absolute;
      top: 0;
      left: 0;
    }
    .icon-download:hover::before{
      background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23fff'/%3E%3C/svg%3E");
    }
  `;

  @property({ type: String }) tag: string = 'a';
  @property({ type: String }) href: string = '#';
  @property({ type: String }) text: string = '';
  @property({ type: String }) icon: string = 'none';


  override render() {
    if (this.tag === 'a'){
      return html`
        <a href="${this.href}" class="icon-${this.icon}">${this.text}</a>
      `;
    } else {
      return html`
        <button class="icon-${this.icon}">${this.text}</button>
      `;
    }
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-button': Button;
  }
}