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

import { i18next } from '@operato/i18n'
import { client } from '@operato/graphql'

import './link-builder.js'

@customElement('play-group-info-link')
export class PlayGroupInfoLink extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        background-color: var(--md-sys-color-surface);
        position: relative;
        text-align: center;
        color: var(--md-sys-color-on-surface);
        font: var(--label-font);
      }

      link-builder {
        flex: 1;
        text-align: start;
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
  ]

  @property({ type: Object }) playGroup?: { id: string; name: string }

  render() {
    return html`
      <link-builder
        command="headless-player"
        target-id=${this.playGroup?.id || ''}
        target-name=${this.playGroup?.name || ''}
      ></link-builder>
    `
  }
}
