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

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

import { i18next, localize } from '@operato/i18n'
import { ScrollbarStyles } from '@operato/styles'

@customElement('integration-summary')
export class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {
  static styles = [
    ScrollbarStyles,
    css`
      :host {
        display: flex;
        flex-direction: row;

        overflow: hidden;
        /* 요약 타일 줄은 큰 면이므로 강조 역할(secondary)이 아니라 표면 계단을 쓴다.
           다크에서 secondary 는 밝아져 화면 상단이 갈색 띠가 됐다. */
        background-color: var(--md-sys-color-surface-container);
        border-radius: var(--border-radius);
        color: var(--md-sys-color-on-surface-variant);
      }

      [card] {
        flex: 1;
        margin: var(--spacing-medium);
        padding: var(--spacing-small) var(--spacing-medium);
        border-right: var(--border-light-color);
      }
      :host :last-child {
        border-right: none;
      }
      strong {
        font-size: 36px;
        line-height: 30px;
        /* 배경이 표면색이므로 짝이 되는 글자색을 쓴다. on-primary 는 primary 위에 놓는 색이다. */
        color: var(--md-sys-color-on-surface);
      }
      span {
        display: block;
        margin-bottom: var(--spacing-small);
        font-size: var(--fontsize-small);
        text-transform: capitalize;
        opacity: 0.6;
      }

      md-icon {
        opacity: 0.6;
      }

      @media screen and (max-width: 480px) {
        :host {
          font-size: 0.8em;
        }
        [card] {
          margin: var(--spacing-small);
          padding: var(--spacing-small);
        }
        [card]:nth-child(5),
        [card]:nth-child(6) {
          display: none;
        }
        [card]:nth-child(4) {
          border-right: none;
        }
        md-icon {
          --md-icon-size: var(--fontsize-large);
        }
        span {
          line-height: 1;
        }
        strong {
          font-size: 24px;
        }
      }
    `
  ]

  @property({ type: Array }) pendings: any
  @property({ type: Array }) scenarios: any
  @property({ type: Array }) connections: any

  render() {
    const now = Date.now()
    const pendings = this.pendings || []
    const scenarios = this.scenarios || []
    const connections = this.connections || []

    const cards = [
      {
        title: 'pending instances',
        icon: 'update',
        value: pendings.length
      },
      {
        title: 'due out instances',
        icon: 'update_disabled',
        value: Math.max(
          0,
          pendings.concat({ due: now + 1 }).findIndex(pending => Number(pending.due) > now)
        )
      },
      {
        title: 'total scenarios',
        icon: 'format_list_numbered',
        value: scenarios.length
      },
      {
        title: 'scenario instances',
        icon: 'list_alt',
        value: scenarios.reduce((total, scenario) => {
          return total + scenario.instances.length
        }, 0)
      },
      {
        title: 'connections',
        icon: 'device_hub',
        value: connections.length
      },
      {
        title: 'active connections',
        icon: 'fact_check',
        value: connections.filter(connection => connection.state == 'CONNECTED').length
      }
    ]

    return cards.map(({ title, icon, value }) => this.renderCard(title, icon, value))
  }

  renderCard(title, icon, value) {
    return html`
      <div card>
        <span>${title}</span>
        <md-icon>${icon}</md-icon>
        <strong> ${value}</strong>
      </div>
    `
  }
}