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

import '@components/EveLink';
import { when } from 'lit/directives/when.js';

@customElement('arx-breadcrumbs-item')
export class BreadcrumbsItem extends LitElement {
  @property() text = '';
  @property() href?: string;
  @property() index = 0;
  @property({ type: Boolean }) isLast = false;

  static override styles = [
    css`
      li {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        animation: fadeIn 0.3s ease-out forwards;
        animation-delay: calc(var(--index, 0) * 0.05s);
        opacity: 0;
      }

      .separator {
        display: flex;
        align-items: center;
        margin-inline: 0.75rem;
        color: var(--color-secondary);
        user-select: none;
        font-size: 0.85rem;
      }

      svg.chevron {
        width: 16px;
        height: 16px;
        fill: currentColor;
        opacity: 0.75;
      }

      .breadcrumb-content {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.7rem;
        border-radius: calc(var(--radius-selector) / 2);
        transition: all 0.2s ease;
      }

      .active {
        background-color: oklch(from var(--color-base-300) l c h / 0.5);
        font-weight: 500;
        color: var(--color-base-content);
      }

      .link {
        color: var(--color-accent);
        text-decoration: none;
      }

      .link:hover .breadcrumb-content {
        background-color: oklch(from var(--color-accent) l c h / 0.1);
      }

      .link:focus-visible {
        outline: var(--border) solid var(--color-accent);
        outline-offset: 2px;
        border-radius: calc(var(--radius-selector) / 2);
      }

      .item-text {
        position: relative;
      }

      .link .item-text::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: var(--border);
        background-color: var(--color-accent);
        transition: width 0.25s ease;
      }

      .link:hover .item-text::after {
        width: 100%;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-2px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    `,
  ];

  override render() {
    return html`
      <li style="--index: ${this.index}">
        ${when(
          this.index > 0,
          () => html`
            <span class="separator" aria-hidden="true">
              <svg class="chevron" viewBox="0 0 24 24">
                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" />
              </svg>
            </span>
          `,
        )}
        ${when(
          this.href && !this.isLast,
          () => html`
            <arx-eve-link class="link" href=${this.href}>
              <span class="breadcrumb-content">
                <span class="item-text">${this.text}</span>
              </span>
            </arx-eve-link>
          `,
          () => html`
            <span class="breadcrumb-content ${this.isLast ? 'active' : ''}">
              <span class="item-text">${this.text}</span>
            </span>
          `,
        )}
      </li>
    `;
  }
}
