<sampler-controls>
    <h4 class="reference-group-title">
        { props.referenceClasses.prefix } { state.sampler.samples.length }
        { props.referenceClasses.infix } { props.investment.input.value }
        { props.referenceClasses.suffix }
    </h4>
    <div class="investment-options-ratio">
        <div class="investment-option-selector-wrapper investment-option-selector-wrapper-left">
            <select class="investment-option-selector left form-item"
                    style="opacity: { interpolatedRatio }"
                    onchange="{ onLeftOptionChange }">
                <option each="{ (option, idx) in props.investment.options }"
                        name="{ option.name }"
                        selected="{ option === state.sampler.investment.options[0] }">
                { option.desc }
                </option>
            </select>
        </div>
        <div class="investment-option-range">
            <div class="investment-options-range-labels">
                <label class="range-label-left"
                       style="opacity: { interpolatedRatio };">{ state.sampler.leftOptionRatioRepr }</label>
                <label class="range-label-right"
                       style="opacity: { interpolatedInverseRatio };">{ state.sampler.rightOptionRatioRepr }</label>
            </div>
            <input type="range"
                   id="ratio-sampler-{ state.sampler.id }"
                   min="0"
                   max="1.0"
                   step="0.01"
                   value="{ state.sampler.investment.inverseRatio }"
                   oninput="{ onRatioInput }"
                   onchange="{ onRatioChange }" />
        </div>
        <div class="investment-option-selector-wrapper investment-option-selector-wrapper-right">
            <select class="investment-option-selector right form-item"
                    style="opacity: { interpolatedInverseRatio }"
                    onchange="{ onRightOptionChange }">
                <option each="{ (option, idx) in props.investment.options }"
                        name="{ option.name }"
                        selected="{ option === state.sampler.investment.options[1] }">
                { option.desc }
                </option>
            </select>
        </div>
    </div>

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

            // life cycle
            onBeforeMount(props, state) {
                state.sampler = props.sampler;
                Object.defineProperty(this, 'interpolatedRatio', { get: this.interpolatedRatio });
                Object.defineProperty(this, 'interpolatedInverseRatio', { get: this.interpolatedInverseRatio });
            },

            // getter
            interpolatedRatio() {
                return Math.min(this.state.sampler.investment.ratio * 2, 1);
            },

            interpolatedInverseRatio() {
                return Math.min(this.state.sampler.investment.inverseRatio * 2, 1);
            },

            // custom event handlers
            onRatioInput(e) {
                this.state.sampler.investment.inverseRatio = parseFloat(e.target.value);
                this.state.sampler.investment.ratio = 1 - this.state.sampler.investment.inverseRatio;
                this.update();
            },

            onRatioChange(e) {
                let ivrt = parseFloat(e.target.value);
                this.state.sampler.investment.inverseRatio = ivrt;
                this.state.sampler.investment.ratio = 1 - ivrt;
                this.props.onRatioChange(e);
            },
 
            onLeftOptionChange(e) {
                this.state.sampler.investment.options[0] = this.props.investment.options[e.target.selectedIndex];
                this.props.onOptionChange(e, this.state.sampler);
            },
 
            onRightOptionChange(e) {
                this.state.sampler.investment.options[1] = this.props.investment.options[e.target.selectedIndex];
                this.props.onOptionChange(e, this.state.sampler);
            }
        }
    </script>
</sampler-controls>
