import { css, html, LitElement } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
import { ifDefined } from 'lit/directives/if-defined.js'

import { ScrollbarStyles } from '@operato/styles'

import './process-basic-info'
import './process-versions'
import './process-info-link'

@customElement('process-info')
export class ProcessInfo extends LitElement {
  static styles = [
    ScrollbarStyles,
    css`
      :host {
        height: 100%;
        min-width: 360px;

        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--main-section-background-color);
      }

      [tab] {
        width: 100%;
        display: flex;
      }

      [tab] > * {
        flex: 1;
      }

      [content] {
        flex: 1;
        overflow-y: auto;
      }

      span {
        padding: 5px 4px 1px;
        font: var(--group-bar-textbutton);
        background-color: var(--secondary-color);
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        text-transform: uppercase;
      }

      span[active] {
        background-color: var(--primary-color);
      }

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

  @property({ type: Object }) process?: { id: string; name: string; description: string }
  @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean = true

  @state() tab: string = 'basic'

  render() {
    return html`
      <div tab>
        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
      </div>
      <div content>
        ${this.tab == 'basic'
          ? html`<process-basic-info
              processId=${ifDefined(this.process?.id)}
              ?enable-modeller=${this.enableModeller}
            ></process-basic-info>`
          : this.tab == 'versions'
          ? html`<process-versions processId=${ifDefined(this.process?.id)}></process-versions>`
          : html`<process-info-link .process=${this.process}></process-info-link>`}
      </div>
    `
  }

  close() {
    history.back()
  }
}
