import '@material/web/icon/icon.js'
import '@operato/data-grist'
import './scenario-instance-view.js'

import gql from 'graphql-tag'
import { css, html, LitElement } from 'lit'
import { customElement, property, query } from 'lit/decorators.js'

import { client } from '@operato/graphql'
import { i18next, localize } from '@operato/i18n'
import { notify, openPopup } from '@operato/layout'
import { ScrollbarStyles } from '@operato/styles'

function IS_SCENARIO_RUNNING(state) {
  return state && state !== 'UNLOADED'
}

@customElement('scenario-instance-monitor')
export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
  static styles = [
    ScrollbarStyles,
    css`
      :host {
        display: block;
        overflow: hidden;
        position: relative;
        padding: var(--spacing-small);
        color: var(--md-sys-color-secondary);
      }

      [running] {
        /* lightgreen 하드코딩 → 상태 색(가동) 역할 */
        background-color: var(--status-success-color, #35a24a);
      }

      [name] {
        font-size: var(--fontsize-default);
        font-weight: bold;
      }

      [progress] {
        display: block;
        position: relative;

        width: 100%;
        margin: 2px;
        padding: 2px;
        box-sizing: border-box;

        border: var(--border-dim-color);
        border-radius: 10px;
        background-color: var(--md-sys-color-surface);
      }
      [progress-wrap] {
        display: flex;
        flex-direction: row;
        margin: 4px 0;
      }

      [running] [progress] {
        background-color: var(--md-sys-color-surface-variant);
      }

      [steps] {
        padding: 0 0 0 var(--spacing-small);
      }

      #progressbar {
        height: 100%;
        text-align: left;
        border-radius: 5px;
        animation: width 1s linear ease-out;
      }

      [buttons] {
        display: flex;
        flex-direction: row-reverse;
        --md-icon-size: 18px;

        border-top: var(--border-dim-color);
        padding: var(--spacing-medium) 0 0 0;
        text-align: right;
      }

      [buttons] md-icon {
        color: var(--md-sys-color-primary);
      }

      @keyframes width {
        0% {
          width: 0;
        }
        100% {
          width: auto;
        }
      }
    `
  ]

  @property({ type: Object }) instance: any
  @property({ type: String }) color?: string

  render() {
    var instance = this.instance
    const { instanceName, progress, message, state } = instance
    const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}

    const running = IS_SCENARIO_RUNNING(state)

    return html`
      <div name>${instanceName}</div>
      <div progress-wrap>
        <div progress>
          <div id="progressbar" style="width:${rate}%;background-color:${this.color};"></div>
        </div>
        <div steps>${step}/${steps}</div>
      </div>
      <div buttons>
        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
          >${running ? 'pause' : 'play_arrow'}</md-icon
        >
        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
        <span><strong>${rounds}</strong> round</span>
      </div>
    `
  }

  async startScenario(instance) {
    var response = await client.mutate({
      mutation: gql`
        mutation ($scenarioName: String!, $instanceName: String) {
          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
            state
          }
        }
      `,
      variables: {
        scenarioName: instance.scenarioName,
        instanceName: instance.instanceName
      }
    })

    notify({
      level: 'info',
      message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`
    })
  }

  async stopScenario(instance) {
    var response = await client.mutate({
      mutation: gql`
        mutation ($instanceName: String!) {
          stopScenario(instanceName: $instanceName) {
            state
          }
        }
      `,
      variables: {
        instanceName: instance.instanceName
      }
    })

    notify({
      level: 'info',
      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`
    })
  }

  async showInstanceDetail() {
    const { instanceName, scenarioName } = this.instance
    openPopup(
      html`
        <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
      `,
      {
        size: 'large',
        title: `${i18next.t('title.scenario-instance')}`
      }
    )
  }
}