import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@operato/property-editor/ox-properties-dynamic-view.js';
import '@operato/markdown';
import '@operato/board/ox-board-viewer.js';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ScrollbarStyles } from '@operato/styles';
import { i18next } from '@operato/i18n';
import { formatValueWithPrecision } from './utils';
let StreamInfo = class StreamInfo extends LitElement {
    constructor() {
        super(...arguments);
        this.dragEndHandler = this.onDragEnd.bind(this);
        this.dragMoveHandler = this.onDragMove.bind(this);
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('mouseup', this.dragEndHandler);
        document.addEventListener('mousemove', this.dragMoveHandler);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener('mouseup', this.dragEndHandler);
        document.removeEventListener('mousemove', this.dragMoveHandler);
    }
    render() {
        var _a;
        const { refid, streamType: type } = ((_a = this.stream) === null || _a === void 0 ? void 0 : _a.state) || {};
        const { data, from, to } = this.stream;
        return html `
      <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
        Stream Information<md-icon @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</md-icon>
      </div>
      <div content>
        <table>
          <tr>
            <td subTh colspan="2">이름</td>
            <td>${refid}</td>
          </tr>
          <tr>
            <td subTh colspan="2">타입</td>
            <td>${type}</td>
          </tr>
          <tr>
            <td subTh colspan="2">노드 이름 (Out → In)</td>
            <td>${`${from.anchor} → ${to.anchor}`}</td>
          </tr>

          ${data
            ? this.dataContent(data)
            : html `<tr>
                <td colspan="3">
                  Not calculated yet.<br />
                  Please, analyze process first.
                </td>
              </tr>`}
        </table>
      </div>
    `;
    }
    dataContent({ Y = {}, m = NaN, T = NaN, p = NaN, h = NaN, MC = NaN, spheat = NaN, htr = NaN, pwr = NaN }) {
        const fractions = Object.entries(Y).map(([material, fraction]) => {
            return { material, fraction };
        });
        return html `
      <tr>
        <td subTh colspan="2">${i18next.t('label.mass')} (kg)</td>
        <td>${formatValueWithPrecision(m)}</td>
      </tr>
      <tr>
        <td subTh colspan="2">${i18next.t('label.temperature')} (K)</td>
        <td>${formatValueWithPrecision(T)}</td>
      </tr>
      <tr>
        <td subTh colspan="2">${i18next.t('label.pressure')} (Pa)</td>
        <td>${formatValueWithPrecision(p)}</td>
      </tr>
      <tr>
        <td subTh colspan="2">${i18next.t('label.specific-enthalpy')} (J/kg)</td>
        <td>${formatValueWithPrecision(h)}</td>
      </tr>
      <tr>
        <td subTh colspan="2">${i18next.t('label.moisture-content')} (%)</td>
        <td>${formatValueWithPrecision(MC)}</td>
      </tr>

      ${fractions.map(({ material, fraction }, idx) => html `
          <tr formation>
            ${idx == 0
            ? html ` <td subTh2 rowspan=${fractions.length}>${i18next.t('label.mass-fraction')}</td> `
            : html ``}
            <td>${material}</td>
            <td>${Number(fraction).toFixed(3)}</td>
          </tr>
        `)}
    `;
    }
    onDragStart(e) {
        e.stopPropagation();
        if (e.button == 0) {
            this.dragStart = {
                x: e.clientX,
                y: e.clientY
            };
        }
        return false;
    }
    onDragMove(e) {
        if (!this.dragStart) {
            return false;
        }
        e.stopPropagation();
        e.preventDefault();
        var x = e.clientX, y = e.clientY;
        const dragStart = { x, y };
        x -= this.dragStart.x;
        y -= this.dragStart.y;
        this.dragStart = dragStart;
        this.style.left =
            Math.min(this.parentElement.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px';
        this.style.top =
            Math.min(this.parentElement.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px';
        return false;
    }
    onDragEnd(e) {
        if (this.dragStart) {
            e.stopPropagation();
            e.preventDefault();
            delete this.dragStart;
        }
    }
};
StreamInfo.styles = [
    ScrollbarStyles,
    css `
      :host {
        background-color: white;
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        border: 2px solid var(--primary-color);
        border-radius: 3px;

        --md-icon-size: 12px;
      }

      [header] {
        background-color: var(--primary-color);
        user-select: none;
        align-items: center;
        color: #eee;
        padding: 0 2px;

        display: flex;
      }

      [header] md-icon {
        margin-left: auto;
        align-self: center;
      }

      [content] {
        overflow: auto;
      }

      table {
        border-collapse: collapse;
        background-color: #fff;
        width: 100%;
        margin: auto;
      }
      tr {
        border-bottom: var(--border-dark-color);
      }
      th {
        border-top: 2px solid var(--focus-background-color);
        border-right: 1px solid var(--primary-color);
        background-color: var(--secondary-text-color);
        padding: var(--padding-narrow);
        color: var(--theme-white-color);
      }

      tr td:first-child {
        background-color: rgba(0, 0, 0, 0.05);
        text-align: right;
      }
      td {
        padding: var(--padding-narrow);
        border-right: var(--border-dark-color);
        text-align: right;
        font-size: 0.8em;
      }
      td:last-child {
        border-right: 0;
      }

      tr[doubleline] {
        border-bottom: 2px double rgba(0, 0, 0, 0.2);
      }

      [subTh] {
        text-align: center !important;
        font-weight: bold;
      }

      [subTh2] {
        background-color: rgba(var(--primary-color-rgb), 0.5) !important;
        color: #fff;
        text-align: center !important;
        font-weight: bold;
        font-size: 1em;
      }
      [formation] td:first-child {
        background-color: rgba(var(--primary-color-rgb), 0.05) !important;
        font-weight: bold;
        color: var(--primary-color);
      }
      [formation]:nth-child(odd) {
        background-color: rgba(var(--primary-color-rgb), 0.02);
      }

      tr:hover,
      [formation]:hover {
        background-color: var(--focus-background-color) !important;
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], StreamInfo.prototype, "stream", void 0);
StreamInfo = __decorate([
    customElement('stream-info')
], StreamInfo);
export { StreamInfo };
//# sourceMappingURL=stream-info.js.map