import './label-studio-wrapper.js'

import { css, html, LitElement } from 'lit'
import { customElement, state, property } from 'lit/decorators.js'
import { gql } from 'graphql-tag'
import { client } from '@operato/graphql'
import { PageView } from '@things-factory/shell/client'

@customElement('label-studio-label-page')
export class LabelStudioLabelPage extends PageView {
  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }

    .label-studio-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .error {
      padding: 20px;
      color: var(--md-sys-color-error);
      text-align: center;
    }
  `

  @property({ type: String }) projectId: string = ''

  async pageUpdated(changes, lifecycle, changedBefore) {
    if (this.active && lifecycle.resourceId) {
      this.projectId = lifecycle.resourceId
    }
  }

  render() {
    const projectId = this.projectId

    if (!projectId) {
      return html`<div class="error">Error: No project ID provided</div>`
    }

    const path = `/projects/${projectId}`

    return html` <label-studio-wrapper .path=${path}></label-studio-wrapper> `
  }
}