<template>
  <v-ons-page @show="page_onShow">
    <v-ons-toolbar modifier="noshadow">
      <div class="left fyd-color-red">
        <router-link to="/agenda" tag="v-ons-toolbar-button">
          <v-ons-icon icon="fa-chevron-left" fixed-width="true" class="fyd-color-red"></v-ons-icon>
        </router-link>
      </div>
      <div class="center">Edit Hours</div>
    </v-ons-toolbar>

    <v-ons-list>
      <!-- Header -->
      <v-ons-list-header>Title</v-ons-list-header>
      <v-ons-list-item>
        <v-ons-input type="text" placeholder="Enter Title" modifier="transparent"></v-ons-input>
      </v-ons-list-item>

      <v-ons-list-header>Date</v-ons-list-header>
      <v-ons-list-item>
        <div class="left" style="width: 30px;">
          <v-ons-icon icon="fa-calendar" fixed-width="true" size="20px"></v-ons-icon>
        </div>
        <v-ons-row>
          <v-ons-col>
            <p class="fyd-text-tiny">From</p>
            <span
              @click="showDatepicker('from')"
              class="fyd-bold fyd-border-bottom-red"
            >{{dateFormatted(new Date())}}</span>
          </v-ons-col>
          <v-ons-col>
            <p class="fyd-text-tiny">To</p>
            <span
              @click="showDatepicker('to')"
              class="fyd-bold fyd-border-bottom-red"
            >{{dateFormatted(new Date())}}</span>
          </v-ons-col>
          <v-ons-col></v-ons-col>
        </v-ons-row>
      </v-ons-list-item>

      <!-- Header -->
      <v-ons-list-header>Notify Me</v-ons-list-header>
      <!-- Options -->
      <template>
        <v-ons-list-item tappable>
          <div class="left" style="width: 30px;">
            <v-ons-icon icon="fa-bell" fixed-width="true" size="20px"></v-ons-icon>
          </div>
          <v-ons-select style="width: 90%" v-model="selectedItem">
            <option v-for="item in minutes" :value="item.value" v-bind:key="item">{{ item }} minutes</option>
          </v-ons-select>
        </v-ons-list-item>
      </template>

      <!-- Header -->
      <v-ons-list-header>Invitees</v-ons-list-header>
      <!-- Options -->
      <template>
        <v-ons-list-item>
          <div class="left" style="width: 30px;" @click="isContactsModalVisible = true">
            <v-ons-icon icon="fa-user-plus" class="fyd-color-red" fixed-width="true" size="20px"></v-ons-icon>
          </div>
          <v-ons-input
            id="myInput"
            type="text"
            modifier="transparent"
            placeholder="Enter name or email address or phone number"
          ></v-ons-input>

        </v-ons-list-item>
      </template>

      <v-ons-dialog
        cancelable
        :visible.sync="isContactsModalVisible"
        style="height: 100% !important"
      >
        <v-ons-list>
          <v-ons-list-item v-for="(contact, $index) in contacts" :key="contact" tappable>
            <label class="left">
              <v-ons-checkbox
                :input-id="'checkbox-' + $index"
                :value="$index"
                modifier="fyd-checkbox"
                v-model="checkedContacts"
              ></v-ons-checkbox>
            </label>
            <label class="center" :for="'checkbox-' + $index">{{ contact.displayName }}</label>

            <label
              class="right"
              :for="'checkbox-' + $index"
            >{{ checkForPhoneNumber(contact.phoneNumbers) }}</label>
          </v-ons-list-item>
        </v-ons-list>
      </v-ons-dialog>

      <!-- Header -->
      <v-ons-list-header>Notes</v-ons-list-header>
      <!-- Options -->
      <template>
        <v-ons-list-item>
          <div class="left" style="width: 30px;">
            <v-ons-icon icon="fa-sticky-note" fixed-width="true" size="20px"></v-ons-icon>
          </div>
          <v-ons-input type="text" placeholder="Enter notes"></v-ons-input>
        </v-ons-list-item>
      </template>

      <v-ons-list-header>Rate</v-ons-list-header>
      <v-ons-list-item>
        <div class="left" style="width: 30px;">
          <v-ons-icon icon="fa-usd" fixed-width="true" size="20px"></v-ons-icon>
        </div>
        <v-ons-input type="text" modifier="transparent" v-model="state.rate"></v-ons-input>
      </v-ons-list-item>

      <v-ons-list-header>Session Length</v-ons-list-header>
      <v-ons-list-item>
        <div class="left" style="width: 30px;">
          <v-ons-icon icon="fa-clock" fixed-width="true" size="20px"></v-ons-icon>
        </div>
        <v-ons-row vertical-align="center">
          <v-ons-col class="fyd-text-tiny fyd-align-center">
            <v-ons-range
              id="maxSessionRange"
              modifier="fyd-range"
              min="0"
              max="300"
              v-model="state.sessionLengths[1]"
              style="width: 80%;"
            ></v-ons-range>
          </v-ons-col>
          <v-ons-col width="40px">
            <span v-if="state.sessionLengths[1] < 300">{{state.sessionLengths[1]}}</span>
            <span v-else>None</span>
          </v-ons-col>
        </v-ons-row>
      </v-ons-list-item>

      <v-ons-list-header>Locations</v-ons-list-header>
      <template>
        <v-ons-list-item>
          <div class="left" style="width: 30px;">
            <v-ons-icon icon="fa-map-marker" fixed-width="true" size="20px"></v-ons-icon>
          </div>
          <v-ons-input
            ref="autocomplete"
            type="text"
            placeholder="Enter Location"
            modifier="transparent"
          ></v-ons-input>

        </v-ons-list-item>
        <v-ons-list-item
          tappable
          v-for="(location, $index) in state.locations"
          v-bind:key="location"
          modifier="nodivider"
        >
          <label class="left">
            <v-ons-checkbox
              v-model="location.isChecked"
              modifier="fyd-checkbox"
              :input-id="'location-' + $index"
            ></v-ons-checkbox>
          </label>
          <label :for="'location-' + $index" class="center">{{location.name}}</label>
        </v-ons-list-item>
      </template>
    </v-ons-list>
  </v-ons-page>
</template>

<style scoped>
ons-col[modifier="fyd-active"] {
    color: red;
    font-weight: bold;
}
</style>

<script>
/* global _:false, moment:false */

import "../assets/css/editavailability.css";

export default {
    name: "schedulerEditAvailability",
    data() {
        return {
            checkedContacts: ["eric"],
            countries: [
                "Afghanistan",
                "Albania",
                "Algeria",
                "Andorra",
                "Angola",
                "Anguilla",
                "Antigua &amp; Barbuda",
                "Argentina",
                "Armenia",
                "Aruba",
                "Australia"
            ],
            isContactsModalVisible: false,
            selectedMinutes: "",
            minutes: ["5", "10", "15", "20", "25", "30", "60", "120", "200"],
            colors: [
                { name: "Blue", class: "fyd-color-availability-blue" },
                { name: "Green", class: "fyd-color-availability-green" },
                { name: "Pink", class: "fyd-color-availability-pink" },
                { name: "Red", class: "fyd-color-availability-red" },
                { name: "Yellow", class: "fyd-color-availability-yellow" }
            ],
            days: [
                "Sunday",
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday"
            ],
            colorModalVisible: false,
            switchOn: false,
            autocomplete: null,
            contacts: [
                {
                    id: "1",
                    rawId: "1",
                    displayName: "austin powers ",
                    pic:
                        "https://firebasestorage.googleapis.com/v0/b/fydrant.appspot.com/o/booking_pic_01.jpg?alt=media&token=12fdbce8-119f-4ad3-8840-92de10b6f2e2",
                    name: {
                        givenName: "austin powers givenName",
                        formatted: "austin powers formatted"
                    },
                    phoneNumbers: [
                        {
                            id: 1,
                            pref: false,
                            value: "(876) 543-4444",
                            type: "mobile"
                        }
                    ],
                    emails: [
                        {
                            id: 4,
                            pref: false,
                            value: "austinpowers@email.com",
                            type: "home"
                        }
                    ],
                    note: null,
                    photos: null,
                    categories: null
                },
                {
                    id: "2",
                    rawId: "2",
                    displayName: "amilya ",
                    pic:
                        "https://firebasestorage.googleapis.com/v0/b/fydrant.appspot.com/o/booking_pic_02.jpg?alt=media&token=eb8286dd-f5c1-44b1-a61c-6472b74f435b",
                    name: {
                        givenName: "amilyia givenName",
                        formatted: "amiliyia formatted"
                    },
                    phoneNumbers: [
                        {
                            id: 2,
                            pref: false,
                            value: "(876) 941-4335",
                            type: "mobile"
                        }
                    ],
                    emails: [
                        {
                            id: 4,
                            pref: false,
                            value: "ami@email.com",
                            type: "home"
                        }
                    ],
                    note: null,
                    photos: null,
                    categories: null
                },
                {
                    id: "3",
                    rawId: "3",
                    displayName: "nateblessings ",
                    pic:
                        "https://firebasestorage.googleapis.com/v0/b/fydrant.appspot.com/o/booking_pic_03.jpg?alt=media&token=3764ccd6-4918-4041-9dab-b0d953b56a05",
                    name: {
                        givenName: "nateblessings givenName",
                        formatted: "nateblessings formatted"
                    },
                    phoneNumbers: [
                        {
                            id: 3,
                            pref: false,
                            value: null,
                            type: "mobile"
                        }
                    ],
                    emails: [
                        {
                            id: 4,
                            pref: false,
                            value: "suh@email.com",
                            type: "home"
                        }
                    ],
                    note: null,
                    photos: null,
                    categories: null
                }
            ]
        };
    },
    props: ["stack"],
    computed: {
        state() {
            return this.$store.getters.getAvailability.editAvailability;
        }
    },
    methods: {
        addNewTimeAndDay() {
            this.state.availabilities.push({
                days: [],
                fromTime: "8:00",
                toTime: "17:00"
            });
        },
        page_onShow() {
            this.setSessionRangeStep("minSessionRange");
            this.setSessionRangeStep("maxSessionRange");
        },
        setSessionRangeStep() {

            //var slider = document.getElementById(id);
            //slider.children[0].step = "15";
        },
        removeAvailability(a) {
            this.state.availabilities = this.state.availabilities.filter(
                x => JSON.stringify(x) !== JSON.stringify(a)
            );
        },
        dayModifier(availability, dayIdx) {
            return _.includes(availability.days, dayIdx) ? "fyd-active" : "";
        },
        toggleActiveDays(availability, dayIdx) {
            var indexOfDay = _.indexOf(availability.days, dayIdx);
            if (indexOfDay === -1) availability.days.push(dayIdx);
            else availability.days.splice(indexOfDay, 1);
        },
        showTimepicker(target, availability) {
            console.log("inside showtimepicker");
            var dateTime;
            if (target == "from") {
                dateTime = moment(availability.fromTime, "HH:mm").toDate();
            } else if (target == "to") {
                dateTime = moment(availability.toTime, "HH:mm").toDate();
            }

            window.plugins.datePicker.show(
                {
                    date: dateTime,
                    mode: "time", // date or time or blank for both
                    allowOldDates: false
                },
                function(returnDate) {
                    if (!returnDate) return;

                    if (target == "from") {
                        availability.fromTime = moment(returnDate).format(
                            "HH:mm"
                        );
                    } else if (target == "to") {
                        availability.toTime = moment(returnDate).format(
                            "HH:mm"
                        );
                    }
                }
            );
        },
        showDatepicker(target) {
            // Save instance reference
            var self = this.state;

            // Get current date
            var oldDate;
            switch (target) {
                case "from":
                    oldDate = new Date();
                    break;
                case "to":
                    oldDate = new Date();
                    break;
            }

            // Display date picker
            window.plugins.datePicker.show(
                {
                    date: oldDate,
                    mode: "date",
                    allowOldDates: true
                },
                function(returnDate) {
                    if (!returnDate) return;

                    // Set new date
                    switch (target) {
                        case "from":
                            self.duration.fromDate = moment(
                                returnDate
                            ).toDate();
                            break;
                        case "to":
                            self.duration.toDate = moment(returnDate).toDate();
                            break;
                    }
                }
            );
        },
        dateFormatted(value) {
            return moment(value).format("MM-DD-YYYY");
        },
        showColorModal() {
            this.colorModalVisible = true;
        },
        setColor(color) {
            this.color = color;
            this.colorModalVisible = false;
        },
        checkForPhoneNumber(phoneNumbers) {
            if (phoneNumbers !== null)
                if (phoneNumbers[0] !== undefined || phoneNumbers[0] !== null)
                    if (
                        phoneNumbers[0].value != undefined ||
                        phoneNumbers[0].value != null
                    ) {
                        return phoneNumbers[0].value;
                    } else {
                        return "no phone number";
                    }
        },
        autocomplete(inp, arr) {
            var currentFocus;
            /*execute a function when someone writes in the text field:*/
            inp.addEventListener("input", function() {
                var a,
                    b,
                    i,
                    val = this.value;
                /*close any already open lists of autocompleted values*/
                closeAllLists();
                if (!val) {
                    return false;
                }
                currentFocus = -1;
                /*create a DIV element that will contain the items (values):*/
                a = document.createElement("DIV");
                a.setAttribute("id", this.id + "autocomplete-list");
                a.setAttribute("class", "autocomplete-items");
                /*append the DIV element as a child of the autocomplete container:*/
                this.parentNode.appendChild(a);
                /*for each item in the array...*/
                for (i = 0; i < arr.length; i++) {
                    /*check if the item starts with the same letters as the text field value:*/
                    if (
                        arr[i].substr(0, val.length).toUpperCase() ==
                        val.toUpperCase()
                    ) {
                        /*create a DIV element for each matching element:*/
                        b = document.createElement("DIV");
                        /*make the matching letters bold:*/
                        b.innerHTML =
                            "<strong>" +
                            arr[i].substr(0, val.length) +
                            "</strong>";
                        b.innerHTML += arr[i].substr(val.length);
                        /*insert a input field that will hold the current array item's value:*/
                        b.innerHTML +=
                            "<input type='hidden' value='" + arr[i] + "'>";
                        /*execute a function when someone clicks on the item value (DIV element):*/
                        b.addEventListener("click", function() {
                            /*insert the value for the autocomplete text field:*/
                            inp.value = this.getElementsByTagName(
                                "input"
                            )[0].value;
                            /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
                            closeAllLists();
                        });
                        a.appendChild(b);
                    }
                }
            });
            /*execute a function presses a key on the keyboard:*/
            inp.addEventListener("keydown", function(e) {
                var x = document.getElementById(this.id + "autocomplete-list");
                if (x) x = x.getElementsByTagName("div");
                if (e.keyCode == 40) {
                    /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
                    currentFocus++;
                    /*and and make the current item more visible:*/
                    addActive(x);
                } else if (e.keyCode == 38) {
                    //up
                    /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
                    currentFocus--;
                    /*and and make the current item more visible:*/
                    addActive(x);
                } else if (e.keyCode == 13) {
                    /*If the ENTER key is pressed, prevent the form from being submitted,*/
                    e.preventDefault();
                    if (currentFocus > -1) {
                        /*and simulate a click on the "active" item:*/
                        if (x) x[currentFocus].click();
                    }
                }
            });
            function addActive(x) {
                /*a function to classify an item as "active":*/
                if (!x) return false;
                /*start by removing the "active" class on all items:*/
                removeActive(x);
                if (currentFocus >= x.length) currentFocus = 0;
                if (currentFocus < 0) currentFocus = x.length - 1;
                /*add class "autocomplete-active":*/
                x[currentFocus].classList.add("autocomplete-active");
            }
            function removeActive(x) {
                /*a function to remove the "active" class from all autocomplete items:*/
                for (var i = 0; i < x.length; i++) {
                    x[i].classList.remove("autocomplete-active");
                }
            }
            function closeAllLists(elmnt) {
                /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
                var x = document.getElementsByClassName("autocomplete-items");
                for (var i = 0; i < x.length; i++) {
                    if (elmnt != x[i] && elmnt != inp) {
                        x[i].parentNode.removeChild(x[i]);
                    }
                }
            }
            /*execute a function when someone clicks in the document:*/
            document.addEventListener("click", function(e) {
                closeAllLists(e.target);
            });
        },
        myMethod() {
            console.log("hello world");
        },
        autocomplete2(inp, arr){
            var currentFocus;
            /*execute a function when someone writes in the text field:*/
            inp.addEventListener("input", function() {
                var a,
                    b,
                    i,
                    val = this.value;
                /*close any already open lists of autocompleted values*/
                closeAllLists();
                if (!val) {
                    return false;
                }
                currentFocus = -1;
                /*create a DIV element that will contain the items (values):*/
                a = document.createElement("DIV");
                a.setAttribute("id", this.id + "autocomplete-list");
                a.setAttribute("class", "autocomplete-items");
                /*append the DIV element as a child of the autocomplete container:*/
                this.parentNode.appendChild(a);
                /*for each item in the array...*/
                for (i = 0; i < arr.length; i++) {
                    /*check if the item starts with the same letters as the text field value:*/
                    if (
                        arr[i].substr(0, val.length).toUpperCase() ==
                        val.toUpperCase()
                    ) {
                        /*create a DIV element for each matching element:*/
                        b = document.createElement("DIV");
                        /*make the matching letters bold:*/
                        b.innerHTML =
                            "<strong>" +
                            arr[i].substr(0, val.length) +
                            "</strong>";
                        b.innerHTML += arr[i].substr(val.length);
                        /*insert a input field that will hold the current array item's value:*/
                        b.innerHTML +=
                            "<input type='hidden' value='" + arr[i] + "'>";
                        /*execute a function when someone clicks on the item value (DIV element):*/
                        b.addEventListener("click", function() {
                            /*insert the value for the autocomplete text field:*/
                            inp.value = this.getElementsByTagName(
                                "input"
                            )[0].value;
                            /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
                            closeAllLists();
                        });
                        a.appendChild(b);
                    }
                }
            });
            /*execute a function presses a key on the keyboard:*/
            inp.addEventListener("keydown", function(e) {
                var x = document.getElementById(this.id + "autocomplete-list");
                if (x) x = x.getElementsByTagName("div");
                if (e.keyCode == 40) {
                    /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
                    currentFocus++;
                    /*and and make the current item more visible:*/
                    addActive(x);
                } else if (e.keyCode == 38) {
                    //up
                    /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
                    currentFocus--;
                    /*and and make the current item more visible:*/
                    addActive(x);
                } else if (e.keyCode == 13) {
                    /*If the ENTER key is pressed, prevent the form from being submitted,*/
                    e.preventDefault();
                    if (currentFocus > -1) {
                        /*and simulate a click on the "active" item:*/
                        if (x) x[currentFocus].click();
                    }
                }
            });
            function addActive(x) {
                /*a function to classify an item as "active":*/
                if (!x) return false;
                /*start by removing the "active" class on all items:*/
                removeActive(x);
                if (currentFocus >= x.length) currentFocus = 0;
                if (currentFocus < 0) currentFocus = x.length - 1;
                /*add class "autocomplete-active":*/
                x[currentFocus].classList.add("autocomplete-active");
            }
            function removeActive(x) {
                /*a function to remove the "active" class from all autocomplete items:*/
                for (var i = 0; i < x.length; i++) {
                    x[i].classList.remove("autocomplete-active");
                }
            }
            function closeAllLists(elmnt) {
                /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
                var x = document.getElementsByClassName("autocomplete-items");
                for (var i = 0; i < x.length; i++) {
                    if (elmnt != x[i] && elmnt != inp) {
                        x[i].parentNode.removeChild(x[i]);
                    }
                }
            }
            /*execute a function when someone clicks in the document:*/
            document.addEventListener("click", function(e) {
                closeAllLists(e.target);
            });
        }
    },
    mounted : function() {
    var input = document.getElementById("myInput");
    console.log(input);
    this.autocomplete2(input, this.countries);
    //https://codepen.io/alligatorio/pen/mXRGLg
}
};
</script>

<style scoped>
/* disabled background for edit availability day is active to remove default blue background from onsen*/

.button {
    background: none;
}

* {
    box-sizing: border-box;
}
body {
    font: 16px Arial;
}
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}
input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}
input[type="text"] {
    background-color: #f1f1f1;
    width: 100%;
}
input[type="submit"] {
    background-color: DodgerBlue;
    color: #fff;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}
</style>