import { css, html, LitElement } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
import { OxPrompt } from '@operato/popup/ox-prompt.js'
import { i18next } from '@operato/i18n'

import './link-builder.js'
import './board-template-builder.js'

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

        overflow-y: auto;
      }

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

      board-template-builder {
        flex: 1;
        text-align: start;
      }

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

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

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

      <board-template-builder .board=${this.board}> </board-template-builder>
    `
  }
}
