<template>

    <div class="selectSurgeryWrap">

        <!-- GpAddresses package - new GP practice selection component -->
        <gp-practice-selection
            :data="gpPracticeData"
            :errors="gpPracticeErrors"
            :url-get-available-gp-practices="urlGetAvailableGpPractices"
            @clear-page-has-errors="$emit('clear-page-has-errors')"
        ></gp-practice-selection>

        <!-- COMMENTED OUT - Legacy DoctorSurgery map-based selection (to be removed after client validation)
        <div class="mapHeader">

            <div class="stockistSearch">

                <div class="row">

                    <div class="inputWrap buttonInline">

                        <input
                                class="text withIcon"
                                id="postcodeSearch"
                                v-model="postcode_search"
                                placeholder="Your postcode"
                        />


                        <button
                                class="iconButton"
                                id="findSurgeryButton"
                        >
                            <i class="fal fa-search"></i>
                        </button>

                    </div>

                </div>


            </div>

            <div class="stockistSearchVue">

                <div class="row" :class="[error ? 'errorWrap' : '']">

                    <div class="inputWrap buttonInline">

                        <input
                                class="text withIcon"
                                v-model="postcode_search"
                                placeholder="Your postcode"
                                @keyup="search($event)"
                        />

                        <button
                                class="iconButton"
                                @click.prevent="search($event, true)"
                        >
                            <i class="fal fa-search"></i>
                        </button>

                    </div>

                    <div class="validationMessage" v-if="error" v-text="error"></div>

                </div>


            </div>

        </div>


        <div
                class="mapWrap"
                :class="[loading ? 'mapLoading' : '']"
        >
            <div class="mapLoader">

                <div class="loadingIcon">
                    <div class="loadingText" v-html="loadingText"></div>
                </div>

            </div>
            <div class="map mapSearch js_mapSearch" data-json-array="placesArray" data-zoom="4"></div>
        </div>

        <div class="stockistWrapper" v-show="placesLoaded">

                <a
                        id="showSearchList"
                        href="#"
                        class="textLink"
                        @click.prevent="showGPList()"
                >
                    Having trouble finding your GP surgery on the map? <span>Click here</span>
                </a>
            <div class="showResultsWrap">
            </div>

            <div id="stockistResults" class="results"></div>

        </div>


        <div class="gpSelectionWrap" v-if="data.doctor_surgery">

            <h5 class="formTitle">Selected Surgery</h5>

            <div class="surgerySelected highlightBox">

                <address-form
                    :formdata="data.doctor_surgery"
                    :errors="errors.doctor_surgery"
                    @clear-errors="clearErrors"
                ></address-form>

            </div>

            <div class="surgeryWarning" v-if="place.disabled">
                <div class="error">
                    This surgery does not accept 3rd party requests. Please contact your GP to request this prescription.
                </div>
            </div>

        </div>
        -->

    </div> <!-- .selectSurgeryWrap -->

</template>



<script>

import GpPracticeSelection from '../../../../GpAddresses/resources/js/GpPracticeSelection.vue';

export default {

    components: {
        GpPracticeSelection
    },

    props: [
        'data',
        'errors',
        "urlGetAvailableDoctorSurgeries",
    ],

    data: function () {
        return {
            // COMMENTED OUT - Legacy DoctorSurgery data
            // map: false,
            // postcode_search: '',
            // placeIndex: -1,
            // place: false,
            // placesArray: [{coords: "55.378052,-3.435973"}],
            // loading: true,
            // mapsInit: false,
            // placesLoaded: false,
            // loadingText: 'Loading Map',
            // error: false,
            // is_editable: 0,
        };
    },

    computed: {
        // Map legacy data prop to new gp_practice format
        gpPracticeData() {
            return {
                gp_practice: this.data.doctor_surgery ? {
                    id: this.data.doctor_surgery.id,
                    name: this.data.doctor_surgery.practice_name || this.data.doctor_surgery.name || '',
                    org_id: this.data.doctor_surgery.ods_code || this.data.doctor_surgery.org_id || '',
                    address_line_1: this.data.doctor_surgery.address_1 || this.data.doctor_surgery.address_line_1 || '',
                    address_line_2: this.data.doctor_surgery.address_2 || this.data.doctor_surgery.address_line_2 || '',
                    town: this.data.doctor_surgery.city || this.data.doctor_surgery.town || '',
                    county: this.data.doctor_surgery.address_3 || this.data.doctor_surgery.county || '',
                    postcode: this.data.doctor_surgery.postcode || '',
                    telephone_number: this.data.doctor_surgery.phone || this.data.doctor_surgery.telephone_number || '',
                } : null
            };
        },
        gpPracticeErrors() {
            return {
                gp_practice: this.errors.doctor_surgery || {}
            };
        },
        urlGetAvailableGpPractices() {
            return '/api/gp-addresses/search-by-postcode';
        }
    },

    watch: {
        // Sync gp_practice selection back to doctor_surgery for backwards compatibility
        'gpPracticeData.gp_practice': {
            handler(newVal) {
                if (newVal) {
                    this.data.doctor_surgery = {
                        id: newVal.id,
                        practice_name: newVal.name,
                        name: newVal.name,
                        ods_code: newVal.org_id,
                        org_id: newVal.org_id,
                        address_1: newVal.address_line_1,
                        address_line_1: newVal.address_line_1,
                        address_2: newVal.address_line_2,
                        address_line_2: newVal.address_line_2,
                        address_3: newVal.county,
                        city: newVal.town,
                        town: newVal.town,
                        county: newVal.county,
                        postcode: newVal.postcode,
                        phone: newVal.telephone_number,
                        telephone_number: newVal.telephone_number,
                    };
                }
            },
            deep: true
        }
    },

    created: function () {
        // COMMENTED OUT - Legacy DoctorSurgery initialization
        // window.placesArray = this.placesArray;
        //
        // EventBus.$on('startGoogleMaps', function(pageNum) {
        //     if (!this.mapsInit) {
        //         this.mapsInit = true;
        //     }
        // });
    },

    mounted: function() {
        // COMMENTED OUT - Legacy DoctorSurgery map initialization
        // var vm = this;
        //
        // $('body').on('click', '.js_focusMarker', function (e) {
        //     ... map click handler ...
        // });
        //
        // vm.googlemap();
    },

    methods: {

        clearErrors: function() {
            this.error = false;
            this.errors.doctor_surgery = {};
            this.$emit('clear-page-has-errors');
        },

        // COMMENTED OUT - Legacy DoctorSurgery methods
        // search: function(e, bypass) { ... },
        // getPlaceIndexByID: function(id) { ... },
        // getSurgeryList: function() { ... },
        // initDoctorSurgeryObject: function() { ... },
        // showGPList: function() { ... },
        // googlemap: function() { ... }

    }

}

</script>
