import { h } from "@stencil/core";
import state from "../../../../signTransactionsModalStore";
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: '8d83ce2436c4ef49447c1950c3da9243a8e891d1', class: "transaction-fee-container" }, h("div", { key: '49a6bc238d752246dded39fe31c12fb8d589a474', class: "fee-header" }, h("p", { key: '1f2af7ab451da0a62e0124932edab00230988ceb' }, "Transaction fee"), isEditable && (h("button", { key: 'e9265e3ddebf20cd2dbc0682a6b30c51ca3b649d', onClick: this.toggleGasOptions, class: "edit-button" }, "Edit"))), feeLimit && (h("p", { key: '75a7521dfbcf0df463df962742affc3f869616c9' }, h("span", { key: 'a9d032b31291d694bc1369463e23a880df6aac8b' }, feeLimit), "\u00A0", h("span", { key: '1e9bd5bf074ed6bffcf64da21f98e8f0785cabe7' }, egldLabel))), h("p", { key: 'd46f07b4dd03e85258bcfd6e03c3d0a37d2d74cd' }, "\u2248", feeInFiatLimit), this.showGasOptions && (h("div", { key: '48917d7609f0d070971e94be8ef22df1a89ebbac', class: "gas-options" }, h("div", { key: 'e85991dc7dbb9933bd0e83fc959f36de35dac6a3', class: "top-section" }, h("div", { key: '3bc3d7d04e0916411cbda27547741d01f5639b3d', class: "gas-price-section" }, h("div", { key: '9b7a0dc67b697aedc81ffc516cb15179272c5a67', class: "label" }, "Gas Price"), h("div", { key: 'f670e758f61c3309951d7ad4ccad7fb3d4f057b8', class: "value" }, gasPrice)), ppuOptions && ppuOptions.length > 0 && (h("div", { key: 'b476b0154aa6f84a5a477d93d8063604721b4cdf', 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: 'b0d271a59179a8455d635ca6623347babc3486c8', class: "gas-limit-section" }, h("div", { key: 'ad8de70f44390a45973c8c5855ffbd46e58a9dbf', class: "label" }, "Gas Limit"), h("div", { key: '5efa7d7e8518817b5f8361082c04ae25ed6faf89', class: "value" }, gasLimit))))));
    }
    static get is() { return "transaction-fee-component"; }
    static get encapsulation() { return "shadow"; }
    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
