<template>
    <div class="bpReadings">

        <div class="bpReadingsFields">

            <div class="bpFields">


                <fieldset class="bpFieldset">

                    <legend>
                        Low
                    </legend>

                    <div class="row">

                        <div class="inputWrap">

                            <label :for="'question_' + question.id + '_low'">
                                mmHg
                            </label>

                            <input
                                :id="'question_' + question.id + '_low'"
                                type="number"
                                step="1"
                                min="0"
                                max="300"
                                :name="'questions[' + question.id + '][values][low]'"
                                v-model="low"
                                @input="update('low')"
                            >

                        </div> <!-- .inputWrap -->

                    </div> <!-- .row -->

                    <legend>
                        High
                    </legend>

                    <div class="row">

                        <div class="inputWrap">

                            <label :for="'question_' + question.id + '_high'">
                                mmHg
                            </label>

                            <input
                                :id="'question_' + question.id + '_high'"
                                type="number"
                                step="1"
                                min="0"
                                max="300"
                                :name="'questions[' + question.id + '][values][high]'"
                                v-model="high"
                                @input="update('high')"
                            >

                        </div> <!-- .inputWrap -->

                    </div> <!-- .row -->

                    <legend>
                        Heart Rate
                    </legend>

                    <div class="row">

                        <div class="inputWrap">

                            <label :for="'question_' + question.id + '_heart_rate'">
                                bpm
                            </label>

                            <input
                                :id="'question_' + question.id + '_heart_rate'"
                                type="number"
                                step="1"
                                min="0"
                                max="300"
                                :name="'questions[' + question.id + '][values][heart_rate]'"
                                v-model="heart_rate"
                                @input="update('heart_rate')"
                            >

                        </div> <!-- .inputWrap -->

                    </div> <!-- .row -->

                </fieldset>

            </div> <!-- .bpFields -->

        </div>

        <input
            type="hidden"
            :value="valuesProvided"
            :name="questionName + '[values][valid]'"
        >

    </div> <!-- .bpReadingsFields -->

</template>

<script>

import {props, computed, methods} from "../mixins/fields";
import { debounce } from 'lodash';

export default {
    name: 'bpField',
    mixins: [props, computed, methods],
    props: {

    },
    data() {
        return {
            low: null,
            high: null,
            heart_rate: null,

            changed: {
                low: false,
                high: false,
                heart_rate: false,
            }
        }
    },
    computed: {

        valuesProvided() {
            return  this.low > 0 && this.high > 0 && this.heart_rate > 0 ?
                1 :
                0;
        }

    },
    created() {
        const ans = (this.question && this.question.answer) ? this.question.answer : null;
        const vals = (ans && ans.values) ? ans.values : null;

        if (vals) {
            if (typeof vals.high !== 'undefined') this.high = vals.high;

            if (typeof vals.low !== 'undefined') this.low = vals.low;

            if (typeof vals.heart_rate !== 'undefined') this.heart_rate = vals.heart_rate;
        }
    },
    methods: {

        update(type) {

            const _this = this;

            this.changed[type] = true;

            this.$nextTick(() => {

                _this.question.answer = _this.valuesProvided;
                _this.bp_field_values = {
                    low: _this.low,
                    high: _this.high,
                    heart_rate: _this.heart_rate,
                };
                _this.updateQuestion(_this.question);

            });

        },

        updateQuestion: debounce(function (question, inputEvent) {

            if (typeof inputEvent == 'undefined' || this.allowInputEvent) {
                question = this.validate(question);
                this.$emit('update-question', question);
            }

        }, 200),

        validate(question) {

            let canProceed = true;

            if (!question.answer > 0 && question.is_required) {
                canProceed = false;
            }

            question.can_proceed = canProceed;

            return question;

        }

    }
}
</script>

<style lang="less">

.bpReadings {

    width: 100%;
    position: relative;


    .bpReadingsFields {

        padding: 12px 0 0;
        margin: 24px 0 0;

        @media @mobile {
            padding: 20px 0 0;
        }
    }

    .bpFields {

        .row {
            display: flex;
            gap: 0 16px;

            @media @mobile {
                flex-wrap: wrap;
                gap: 0;
            }

            &:before, &:after {
                display: none;
            }
        }

        .inputWrap {

            position: relative;
            float: none;
            clear: both;
            padding: 0;
            flex: 1 1 100%;

            @media @mobile {
                flex: 0 0 100%;
                margin-bottom: 12px;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            input {
                position: relative;
                z-index: 1;
                float: none !important;
                clear: both !important;
                padding-right: 64px !important;
                -moz-appearance: textfield;
                border-radius: 59px;

                /* Chrome, Safari, Edge, Opera */

                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

            }

            label {
                background: var(--primary_color);
                color: #fff;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 4px;
                width: 64px;
                height: ~"calc(100% - 2px)";
                position: absolute;
                top: 1px;
                right: 1px;
                bottom: 1px;
                z-index: 2;
                border-radius: 0 59px 59px 0;
                margin: 0;

            }
        }
    }

    fieldset {

        legend {

            display: block;
            .rems(12);
            line-height: 1.2em;
            font-weight: 600;
            color: var(--text_color);
            margin: 0 0 8px;

        }

    }

    .row {

        .radioButtons {

            .labelButton {

                label {
                    border-radius: 59px !important;
                }

            }

        }

    }

}


</style>
