<sampling-header>
    <div id="source-modal" style="visibility: { state.modal.visibility }" is="sampling-info"></div>
    <h1 class="sampling-title">{ props.appTitle }
        <a href="#"
           onclick="{ toggleSource }">
            <i class="demo-icon { state.modal.icon.class }"></i>
        </a>
    </h1>
    <h2 class="sampling-description">
        { props.description[0] }
        <input id="investment-input"
               class="form-item investment investment-input"
               type="number"
               name="investment-input"
               inputmode="decimal"
               min="{ props.investment.input.min }"
               max="{ props.investment.input.max }"
               onchange="{ props.onInvestmentInputChange }"
               placeholder="{ props.investment.input.value }"
               value="{ state.investment.input.value }">
        { props.description[1] }
        <select id="period-selector"
                class="period-selector form-item"
                name="period-selector"
                onchange="{ props.onPeriodChange }"
                value="{ state.period.id }">
            <option each="{ period in props.periods }">
            { period.value } { props.labels.period }
            </option>
        </select>
        { props.description[2] }
        <input id="investment-output"
               class="form-item investment investment-output"
               type="number"
               name="investment-output"
               inputmode="decimal"
               min="{ props.investment.output.min }"
               max="{ props.investment.output.max }"
               onchange="{ props.onInvestmentOutputChange }"
               placeholder="{ props.investment.output.value }"
               value="{ state.investment.output.value }">
        { props.description[3] }
    </h2>
    <!-- <div id="source-modal" style="visibility: { state.visibilityModal }" is="sampling-info"></div> -->

    <script charset="utf-8">
        export default {

            // life cycle methods
            onBeforeMount(props, state) {
              this.state.investment = this.props.investment;
              this.state.period = this.props.period;
              this.modalStates = [
                    {
                        visibility: 'hidden',
                        icon: {
                            class: 'icon-info-circled',
                            glyph: '&#xe803;'
                        }
                    },
                    {
                        visibility: 'visible',
                        icon: {
                            class: 'icon-cancel-circled',
                            glyph: '&#xe804;'
                        }
                    }
                ];
              this.state.visibility = 0;
              this.state.modal = this.modalStates[this.state.visibility];
            },

            onMounted() {
              this.displayIcon();
            },

            toggleSource(e) {
                e.preventDefault();
                this.state.visibility = (this.state.visibility + 1) % 2;
                this.state.modal = this.modalStates[this.state.visibility];
                this.update({
                    modal: this.modalStates[this.state.visibility]
                });
                this.displayIcon();
            },

            displayIcon() {
                this.$('i.demo-icon').innerHTML = this.state.modal.icon.glyph;
            },
        }
    </script>
</sampling-header>
