import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import '@digital-realty/ix-button';

export interface IGridNavButton {
  testId?: string;
  path?: string;
  selected?: boolean;
  disabled?: boolean;
  onClick?: () => void;
  text: string;
}

export class IxGridNavigation extends LitElement {
  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];

  static styles = css`
    :host {
      --md-filled-button-container-color: var(
        --grid-nav-button-container-color,
        var(--clr-on-surface, #092241)
      );
      --md-filled-button-container-height: var(
        --grid-nav-button-container-height,
        2.5rem
      );
      --md-text-button-container-height: var(
        --grid-nav-button-container-height,
        2.5rem
      );
      --md-text-button-label-text-color: var(--clr-on-surface, #092241);
      --md-text-button-hover-label-text-color: var(--clr-on-surface, #092241);
      --md-text-button-pressed-label-text-color: var(--clr-on-surface, #092241);
      --md-text-button-focus-label-text-color: var(--clr-on-surface, #092241);
    }

    [disabled] {
      --md-filled-button-disabled-container-color: var(
        --grid-nav-button-disabled-container-color,
        transparent
      );
      --md-filled-button-disabled-label-text-color: var(
        --grid-nav-button-disabled-container-color,
        var(--clr-on-surface, #000)
      );
    }

    .container {
      display: var(--grid-nav-button-group-display, flex);
      gap: var(--grid-nav-button-group-gap, 0.5rem);
    }

    .button {
      margin: var(--grid-nav-button-margin, 0);
    }

    .button-text {
      text-transform: var(--grid-nav-button-text-transform, none);
      font-size: var(--grid-nav-button-font-size, 14px);
      font-family: var(--root-primary-font, 'sans-serif');
      line-height: 1.5rem;
    }

    @media only screen and (max-width: 840px) {
      .container {
        overflow-x: auto;
        white-space: nowrap;
      }

      .button {
        flex: 0 0 auto;
      }
    }

    @media only screen and (max-width: 600px) {
      .grid-header {
        align-items: flex-end;
        flex-direction: row;
      }
      .container {
        overflow-x: auto;
        max-width: calc(100vw - 2rem);
      }
    }
  `;

  // eslint-disable-next-line class-methods-use-this
  renderButton = ({
    path,
    text,
    onClick,
    testId,
    disabled,
    selected,
  }: IGridNavButton) =>
    html`
      <ix-button
        ?disabled=${disabled}
        data-testid=${ifDefined(testId)}
        appearance=${selected ? 'filled' : 'text'}
        href=${ifDefined(selected ? undefined : path)}
        @click=${onClick}
        class="button"
        style=${selected ? 'pointer-events: none' : ''}
        ><div class="button-text">${text}</div></ix-button
      >
    `;

  render() {
    return html`
      <div class="container">
        ${this.buttons.map(button => this.renderButton(button))}
      </div>
    `;
  }
}