import '../viewpart/process-report'

import { css, html, PropertyValues } from 'lit'
import { customElement, property, query } from 'lit/decorators.js'
import { connect } from 'pwa-helpers/connect-mixin.js'

import { PageView, store } from '@operato/shell'
import { i18next } from '@operato/i18n'

@customElement('process-report-page')
export class ProcessReportPage extends connect(store)(PageView) {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
      }

      process-report {
        flex: 1;
      }
    `
  ]

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

  get context() {
    return {
      title: i18next.t('title.process-report')
    }
  }

  render() {
    return html` <process-report .processId=${this._processId}></process-report> `
  }

  pageUpdated(changes: any, lifecycle: any) {
    if (this.active) {
      this._processId = lifecycle.resourceId
    } else {
      this._processId = ''
    }
  }
}
