import { h } from "@stencil/core";
import state from "../../../../signTransactionsPanelStore";
export class TransactionFeeComponent {
    constructor() {
        this.showGasOptions = false;
        this.toggleGasOptions = () => {
            this.showGasOptions = !this.showGasOptions;
        };
        this.handlePpuChange = (value) => () => {
            state.onSetPpu(value);
        };
    }
    render() {
        const { egldLabel, feeInFiatLimit, feeLimit, gasLimit, gasPrice, ppu, isEditable, ppuOptions } = state.commonData;
        return (h("div", { key: '50ab47d5c8822a65d4c3570129f04a4dde62ca71', class: "transaction-fee-container" }, h("div", { key: '44d51d8ef9feccdb57a9e6c0655daedb65c5f642', class: "fee-header" }, h("p", { key: '7c105a57e4d5a2ee6fea6ebd57972d3c4baafaca' }, "Transaction fee"), isEditable && (h("button", { key: '8760383f1e9f51babace99a00752e5d9ae7f08af', onClick: this.toggleGasOptions, class: "edit-button" }, "Edit"))), feeLimit && (h("p", { key: '136041d40a6650ec6d544dca9d10f5acab045a40' }, h("span", { key: '6d29de9e44425cf021aafba77c7045d0f010f3c5' }, feeLimit), "\u00A0", h("span", { key: 'a52982500512a56186697ed76ee0d249cbae209b' }, egldLabel))), h("p", { key: '721a0de00f53b2ee46158b4b3f6ed4978950d261' }, "\u2248", feeInFiatLimit), this.showGasOptions && (h("div", { key: '3bf660debca9d856d12f46a52a2a6db2bbe2583e', class: "gas-options" }, h("div", { key: '1270f0f90230b8d0e41d7f60834f3b3611353387', class: "top-section" }, h("div", { key: 'd92d6df3f33c180afe90ed521838899c80f02b98', class: "gas-price-section" }, h("div", { key: 'caf812f2d02e4451d71e185027b8da0ea9367289', class: "label" }, "Gas Price"), h("div", { key: '23ecad14c2fb7d75aa44178bcfc9e162c25be3c1', class: "value" }, gasPrice)), ppuOptions && ppuOptions.length > 0 && (h("div", { key: '1ae19fea99c18ff1901b4d3b989c5a1d12026179', class: "radio-group" }, ppuOptions.map(option => (h("div", { class: "radio-option" }, h("input", { disabled: !isEditable, type: "radio", id: `ppu${option.value}`, name: "ppu", value: option.value, checked: ppu === option.value, onChange: this.handlePpuChange(option.value) }), h("label", { htmlFor: `ppu${option.value}` }, option.label))))))), h("div", { key: 'e94d99c6d3df2a5702287644681294c56acb0e29', class: "gas-limit-section" }, h("div", { key: 'df7778453f7b25154b876f363983c6b2e34d1c2c', class: "label" }, "Gas Limit"), h("div", { key: '769d07e1be7237aa0dd1722b2884638a217ad9a1', class: "value" }, gasLimit))))));
    }
    static get is() { return "mvx-transaction-fee-component"; }
    static get originalStyleUrls() {
        return {
            "$": ["transaction-fee-component.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["transaction-fee-component.css"]
        };
    }
    static get states() {
        return {
            "showGasOptions": {}
        };
    }
}
//# sourceMappingURL=transaction-fee-component.js.map
