import { __decorate, __metadata } from "tslib";
import '@material/mwc-icon';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { i18next } from '@operato/i18n';
import { ScrollbarStyles } from '@operato/styles';
import { convertPropertyValue } from './utils';
var STED_COMPOSITION_LIST = ['H2O', 'N2', 'O2', 'N2O', 'CO2', 'CH4', 'C2H6', 'C3H8'];
let ProcessReport = class ProcessReport extends LitElement {
    render() {
        var process = this.process || { name: '' };
        var stedNodes = (this.stedNodes || []);
        var smartGuides = (this.smartGuides || []);
        var stedModuleList = [];
        var substances = [];
        stedNodes.forEach(stedNode => {
            let nodeName = `${stedNode.type}(${stedNode.name})`;
            stedNode.inlets.map(inlet => {
                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                !stedModuleList.some(sm => sm.name === inlet.name) &&
                    stedModuleList.push({
                        name: inlet.name,
                        kind: inlet.kind,
                        type: inlet.type,
                        T: (_a = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _a === void 0 ? void 0 : _a.T,
                        m: (_b = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _b === void 0 ? void 0 : _b.m,
                        p: (_c = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _c === void 0 ? void 0 : _c.p,
                        h: (_d = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _d === void 0 ? void 0 : _d.h,
                        Y: (_e = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _e === void 0 ? void 0 : _e.Y,
                        MC: (_f = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _f === void 0 ? void 0 : _f.MC,
                        specificHeat: (_g = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _g === void 0 ? void 0 : _g.spheat,
                        pwr: (_h = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _h === void 0 ? void 0 : _h.pwr,
                        htr: (_j = inlet === null || inlet === void 0 ? void 0 : inlet.data) === null || _j === void 0 ? void 0 : _j.htr
                    });
            });
            stedNode.outlets.map(outlet => {
                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                !stedModuleList.some(sm => sm.name === outlet.name) &&
                    stedModuleList.push({
                        name: outlet.name,
                        kind: outlet.kind,
                        type: outlet.type,
                        T: (_a = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _a === void 0 ? void 0 : _a.T,
                        m: (_b = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _b === void 0 ? void 0 : _b.m,
                        p: (_c = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _c === void 0 ? void 0 : _c.p,
                        h: (_d = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _d === void 0 ? void 0 : _d.h,
                        Y: (_e = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _e === void 0 ? void 0 : _e.Y,
                        MC: (_f = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _f === void 0 ? void 0 : _f.MC,
                        specificHeat: (_g = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _g === void 0 ? void 0 : _g.spheat,
                        pwr: (_h = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _h === void 0 ? void 0 : _h.pwr,
                        htr: (_j = outlet === null || outlet === void 0 ? void 0 : outlet.data) === null || _j === void 0 ? void 0 : _j.htr
                    });
            });
        });
        STED_COMPOSITION_LIST.forEach(sc => {
            substances.push(stedModuleList.map(sm => (sm.type === 'fluid' ? (sc in sm.Y ? sm.Y[sc] : null) : null)));
        });
        const smartGuide = smartGuides.map(({ guide }) => guide).join('</br>');
        return html `
      ${process.thumbnail ? html ` <img src=${process.thumbnail} /> ` : html ``}

      <div id="smart-guide">
        <h2><mwc-icon>auto_stories</mwc-icon> smart guide</h2>
        <p>${smartGuide}</p>
      </div>

      <table>
        <tr>
          <th colspan="2">구분</th>
          ${stedModuleList.map(sm => html ` <th>${sm.name}</th> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.type')}</td>
          ${stedModuleList.map(sm => html ` <td>${sm.type}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.mass')} (kg)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.m)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.temperature')} (K)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.T)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.pressure')} (Pa)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.p)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">비엔탈피 (J/kg)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.h)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.moisture-content')} (%)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.MC)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">비열 (J/(kg·K))</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.specificHeat, 4)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.electric-power')} (W)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.pwr)}</td> `)}
        </tr>
        <tr>
          <td subTh colspan="2">${i18next.t('label.out-heat')} (W)</td>
          ${stedModuleList.map(sm => html ` <td>${convertPropertyValue(sm.htr)}</td> `)}
        </tr>

        ${substances.map((subs, idx) => {
            return html `
            <tr formation>
              ${idx == 0
                ? html ` <td subTh2 rowspan="${substances.length}">${i18next.t('label.fraction')}</td> `
                : html ``}

              <td>${STED_COMPOSITION_LIST[idx]}</td>
              ${subs.map(sub => html ` <td>${parseFloat(sub || 0.0).toFixed(3)}</td>`)}
            </tr>
          `;
        })}
      </table>
    `;
    }
    close() {
        history.back();
    }
};
ProcessReport.styles = [
    ScrollbarStyles,
    css `
      :host {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: min-content;
        align-content: baseline;
        background-color: var(--main-section-background-color);
        overflow: auto;
      }

      img {
        display: block;

        margin: var(--margin-default) auto;
        max-width: 100%;
        max-height: 100%;
        border: var(--border-dark-color);
      }
      h2 {
        margin: 0;
        padding: var(--padding-narrow) 4px;
        vertical-align: middle;
        font: var(--subtitle-font);
        color: var(--subtitle-text-color);
        text-transform: capitalize;
      }
      h2 mwc-icon {
        position: relative;
        top: 3px;
        font-size: 1.1em;
      }
      #smart-guide {
        padding: var(--padding-wide);
        border-left: 1px dashed rgba(0, 0, 0, 0.15);
      }
      table {
        grid-column: 1 / span 2;
        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;
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
          display: block;
        }
        #smart-guide {
          padding: 0 var(--padding-default) var(--padding-default) var(--padding-default);
        }
        p {
          margin: 0;
        }
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessReport.prototype, "process", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessReport.prototype, "evaluation", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessReport.prototype, "stedNodes", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], ProcessReport.prototype, "smartGuides", void 0);
ProcessReport = __decorate([
    customElement('process-report')
], ProcessReport);
export { ProcessReport };
//# sourceMappingURL=process-report.js.map