import { LitElement, html, css, svg } from "lit";
import { customElement, property } from "lit/decorators.js";
import { validURL } from "./utils/validURL";

const searchIcon = svg`<path d="M15.5 15.5L19 19M5 11a6 6 0 1012 0 6 6 0 00-12 0z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>`;
const loadingIcon = svg`
<path d="M21 12a9 9 0 11-6.219-8.56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
`;

@customElement("hvs-input-icon")
export default class HvsInputIcon extends LitElement {
  @property({ attribute: "is-loading", type: Boolean })
  isLoading = false;

  @property({ attribute: false, type: String })
  searchIcon?: string = "";

  protected render() {
    const classes = `${
      this.isLoading
        ? "hvs-icon-container loading-animation"
        : "hvs-icon-container"
    }`;

    const withCustomIcon = this.searchIcon && validURL(this.searchIcon);

    if (withCustomIcon) {
      return this.isLoading
        ? html`
            <div class=${classes}>
              <svg
                stroke-width="1.5"
                width="24px"
                height="24px"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                stroke="var(--hvs-icon-color, #98A2B3)"
              >
                ${loadingIcon}
              </svg>
            </div>
          `
        : html`
            <div class=${classes}>
              <img src=${this.searchIcon} class="hvs-search-icon" />
            </div>
          `;
    }

    return html`
      <div class=${classes}>
        <svg
          stroke-width="1.5"
          width="24px"
          height="24px"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="var(--hvs-icon-color, #98A2B3)"
        >
          ${this.isLoading ? loadingIcon : searchIcon}
        </svg>
      </div>
    `;
  }

  static styles = css`
    .hvs-icon-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      display: flex;
      padding: var(--hvs-icon-container-padding, 4px);
      align-items: var(--hvs-search-icon-container-align, center);
      justify-content: var(--hvs-search-icon-container-justify, center);
      width: var(--hvs-search-icon-container-width, auto);
      height: var(--hvs-search-icon-container-height, auto);
      border-top-right-radius: var(
        --hvs-search-icon-container-top-right-radius,
        0px
      );
      border-bottom-right-radius: var(
        --hvs-search-icon-container-bottom-right-radius,
        0px
      );
      border-top-left-radius: var(
        --hvs-search-icon-container-top-left-radius,
        0px
      );
      border-bottom-left-radius: var(
        --hvs-search-icon-container-bottom-left-radius,
        0px
      );
      border-width: var(--hvs-search-icon-container-border-width, inherit);
      background: var(--hvs-search-icon-container-bg, inherit);
      cursor: var(--hvs-search-icon-container-cursor, text);
      padding: var(--hvs-search-icon-container-padding, 0px);
    }

    .loading-animation {
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: var(
        --hvs-loading-animation,
        load8 1.5s infinite cubic-bezier(0.45, 0, 0.55, 1)
      );
      animation: var(--hvs-loading-animation, load8 1.5s infinite cubic-bezier(0.45, 0, 0.55, 1));
    }
    
    .hvs-search-icon {
      width: var(--hvs-search-icon-width, 24px);
      height: var(--hvs-search-icon-height, 24px);
      transition: transform 0.2s ease;
    }
    
    .hvs-icon-container:hover .hvs-search-icon {
      transform: scale(1.05);
    }

    @keyframes load8 {
      0% {
        transform: rotate(0deg);
        opacity: 0.8;
      }
      50% {
        opacity: 1; 
      }
      100% {
        transform: rotate(360deg);
        opacity: 0.8;
      }
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "hvs-input-icon": HvsInputIcon;
  }
}