import { LitElementWw } from '@webwriter/lit'
import { TemplateResult, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { consume } from '@lit/context'

import type { DataSet } from '@/types/data_set'
import { dataSetContext } from '@/contexts/data_set_context'
import type { OutputLayer } from '@/components/network/output_layer'
import { CCard } from '../reusables/c-card'
import { CDataInfo } from '../reusables/c-data-info'
import { msg } from '@lit/localize'

export class LayerOutgoingDataCard extends LitElementWw {
  static scopedElements = {
    'c-card': CCard,
    'c-data-info': CDataInfo,
  }

  @property()
  accessor layer: OutputLayer

  @consume({ context: dataSetContext, subscribe: true })
  accessor dataSet: DataSet

  // RENDER  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  render(): TemplateResult<1> {
    return html`
      <c-card>
        <div slot="title">${msg('Outgoing data')}</div>
        <div slot="content">
          ${this.layer.conf.dataSetLabel.key
            ? html`
                <c-data-info
                  type="label"
                  .dataDesc="${this.layer.conf.dataSetLabel}"
                  .dataSet="${this.dataSet}"
                ></c-data-info>
              `
            : html``}
        </div>
      </c-card>
    `
  }
}