<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <br />
    <div class="container col-md-12">
      <div class="col-sm-12">
        <div class="about-img-box">
          <img
            :src="restaurant.logo"
            alt="Restaurant Details"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
        </div>
        <div class="sinse-box" style="border-radius:10px">
          <h3 class="sinse-title">Restaurant Details</h3>
        </div>
      </div>
      <br />
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottomL 1em">
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Update Logo</label>
              <div class="input-group-prepend">
                <span class="input-group-text" style="cursor: pointer;" @click="UpdateLogo">
                  <eva-icon @click="UpdateLogo" name="image-outline" fill="#24aae1"></eva-icon>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" style="text-align:left">
        <!--Column 1 -->
        <div class="col-md-6" style="margin-bottomL 1em">
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Name</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="edit-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input class="form-control" type="text" name="rname" v-model="restaurant.name" />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <label>Methods Of Payment</label>
                <ul>
                  <li v-for="(mop, i) in mops" :key="i">
                    <input type="checkbox" :id="mop.name" :value="mop.name" v-model="selectedMops" />
                    <label :for="mop.name">{{ mop.name }}</label>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Delivery Fee</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="number"
                  name="deliveryFee"
                  v-model="restaurant.deliveryFee"
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Delivery Radius (KM)</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="pin-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="number"
                  name="deliveryRadius"
                  v-model="restaurant.deliveryRadius"
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Delivery Time (Minutes)</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="clock-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="number"
                  name="deliveryRadius"
                  placeholder="From"
                  v-model="restaurant.deliveryFrom"
                />
                <input
                  class="form-control"
                  type="number"
                  name="deliveryRadius"
                  placeholder="To"
                  v-model="restaurant.deliveryTo"
                />
              </div>
            </div>
          </div>
        </div>
        <!--Column 2 -->
        <div class="col-md-6" style="margin-bottomL 1em">
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Trading Hours</label>
              <ListView
                :items="tradingHours"
                :showColumnChooser="false"
                :hideSearch="true"
                :deleteable="true"
                :displayColumn="thColumns"
                @onDelete="Delete"
                @onNew="New"
              />
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Categories</label>
              <ListView
                :items="categories"
                :showColumnChooser="false"
                :hideSearch="true"
                :deleteable="true"
                :displayColumn="columns"
                :sortKey="Description"
                @onDelete="DeleteCat"
                @onNew="NewCat"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="title-box-d">
            <br />
            <h3 class="title-d" style="text-align:left;">Address</h3>
          </div>
        </div>
      </div>
      <div class="row" style="text-align:left">
        <!--Column 1 -->
        <div class="col-md-6" style="margin-bottomL 1em">
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Shopping Centre</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="shopping-cart-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="shopName"
                  v-model="restaurant.shoppingCentre"
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Shop Number</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="hash-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="shopNo"
                  v-model="restaurant.shopNumber"
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Street Number</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.streetNumber"
                  disabled
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Street Name</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.streetName"
                  disabled
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Suburb</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.suburb"
                  disabled
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>City</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.city"
                  disabled
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Province</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.province"
                  disabled
                />
              </div>
            </div>
          </div>
          <div class="row" style="text-align:left">
            <div class="col-md-12" style="margin-bottom: 1em">
              <label>Postal Code</label>
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="navigation-2-outline" fill="#24aae1"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="FirstName"
                  v-model="restaurant.postalCode"
                  disabled
                />
              </div>
            </div>
          </div>
        </div>
        <!--Column 2 -->
        <div class="col-md-6" style="margin-bottomL 1em">
          <div class="row" style="text-align:left">
            <div class="col-md-4" style="margin-bottom: 1em">
              <button
                @click="ShowMap()"
                class="btn btn-b-n"
                type="button"
                data-dismiss="modal"
              >Update Address</button>
            </div>
          </div>
          <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
        </div>
      </div>
      <div class="row offset-md-5">
        <div class="col-md-2">
          <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
        </div>
        <div class="col-md-2">
          <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
    <!-- need to still gey this working -->
    <modal name="loadImage" :width="600" :height="100">
      <div class="container">
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Select Image</label>
            <div class="input-group-prepend">
              <image-uploader
                :preview="true"
                :className="['fileinput', { 'fileinput--loaded': hasImage }]"
                capture="environment"
                :debug="1"
                doNotResize="gif"
                :autoRotate="true"
                outputFormat="verbose"
                @input="setImage"
              >
                <label for="fileInput" slot="upload-label">
                  <figure>
                    <path
                      class="path1"
                      d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                    ></path>
                  </figure>
                </label>
              </image-uploader>
            </div>
          </div>
        </div>
      </div>
    </modal>
    <modal name="map" :width="600" :height="620">
      <div class="container">
        <h2>Update Location</h2>
        <br />
        <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
        <div class="row" style="text-align:left">
          <div class="col-md-4" style="margin-bottom: 1em">
            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </modal>
    <modal name="tradingHours" :width="600" :height="380">
      <TradingHours @tradingUpdate="TradingUpdate" />
    </modal>
    <modal name="Categories" :width="600" :height="500">
      <Categories @selected="selectedCategory" />
    </modal>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Map from "../shared/mapSetLocation";
import ListView from "../shared/listView";
import Categories from "../restaurants/restaurantCategorySelect";
import TradingHours from "../accounts/tradingHours";
import ImageUploader from "vue-image-upload-resize";
import Log from "../../assets/Log";

export default {
  name: "RestaurantDetails",
  components: {
    Map,
    ListView,
    Categories,
    TradingHours,
    ImageUploader
  },
  data() {
    return {
      thColumns: [
        "description",
        "openingTime",
        "closingTime",
        "closed",
        "opened24H"
      ],
      wait: false,
      selectedMops: [],
      hasImage: false,
      restaurantId: Log.restaurantId()
    };
  },
  methods: {
    ...mapActions("restaurant", [
      "getRestaurant",
      "updateRestaurant",
      "removeTradingHours"
    ]),
    Save() {
      this.wait = true;

      var mops = "";
      for (let i = 0; i < this.selectedMops.length; i++) {
        mops = mops + this.selectedMops[i] + "|";
      }

      var cats = "";
      for (let i = 0; i < this.categories.length; i++) {
        cats = cats + this.categories[i].description + "|";
      }

      this.restaurant.savedTradingHours = this.tradingHours;
      this.restaurant.categories = cats;
      this.restaurant.methodsOfPayment = mops;

      this.updateRestaurant(this.restaurant)
        .then(fulfilled => {
          this.$router.push("/");
        })
        .catch(error => {
          console.log(error.message);
        });
    },

    Close() {
      this.$router.push("/");
    },
    ShowMap() {
      this.$modal.show("map");
    },
    HideMap() {
      this.$modal.hide("map");
    },
    New() {
      this.$modal.show("tradingHours");
    },
    NewCat() {
      this.$modal.show("Categories");
    },
    UpdateAddress(address) {
      this.restaurant.streetNumber = address.streetNumber;
      this.restaurant.streetName = address.streetName;
      this.restaurant.suburb = address.suburb;
      this.restaurant.city = address.city;
      this.restaurant.province = address.province;
      this.restaurant.country = address.country;
      this.restaurant.postalCode = address.postalCode;
      this.restaurant.googleMapUrl = address.url;
      this.restaurant.latitude = address.coordinates.lat;
      this.restaurant.longitude = address.coordinates.lng;
    },
    TradingUpdate(item) {
      this.tradingHours.push(item);
      this.$modal.hide("tradingHours");
    },
    selectedCategory(item) {
      this.categories.push(item[0]);
      this.$modal.hide("Categories");
    },
    DeleteCat(item) {
      this.categories.pop(item);
    },
    Delete(item) {
      this.removeTradingHours(item.id);
      this.tradingHours.pop(item);
    },
    UpdateLogo() {
      this.$modal.show("loadImage");
    },
    setImage: function(output) {
      this.$modal.hide("loadImage");
      this.restaurant.logo = output.dataUrl;
    }
  },
  computed: {
    ...mapState("restaurant", ["restaurant"]),
    ...mapState("mop", ["mops"]),
    mapCoords() {
      var coords = {
        lat: this.restaurant.latitude,
        lng: this.restaurant.longitude
      };
      return coords;
    },
    tradingHours() {
      return this.restaurant.savedTradingHours;
    },
    categories() {
      return this.restaurant.savedCategories;
    },
    SavedMops() {
      this.selectedMops = this.restaurant.selectedMethodsOfPayments;
    }
  },
  mounted() {
    this.wait = false;
    this.getRestaurant(this.restaurantId);
  },
  watch: {
    SavedMops() {
      alert("bla");
    }
  }
};
</script>