<script setup>
import {
  getCurrentInstance,
  ref,
  onMounted,
  onUnmounted,
  nextTick,
  computed,
  watch,
} from "vue";
import Swal from "sweetalert2";

import Multiselect from "vue-multiselect";
import { GChart } from "vue-google-charts";

import EasyTable from "vue3-easy-data-table";
import GuestLayout from "../Layouts/GuestLayout.vue";

import axios from "axios";
import filterimg from "@/assets/eglass-filter.png";
import searchimg from "@/assets/search-icon.svg";
import { settingsStore } from '../settingsStore.js';


const screenWidth = ref(screen.width)
const screenHeight = ref(screen.height)
const hover = ref(true);
const hoverImage = ref(null);
const selectedRow = ref(null);

const sdropdown = ref([
  { text: "Description", value: "typeName" },
  { text: "Item name", value: "name" },
  { text: "Code of product", value: "code" },
]);

const products = ref([]);
const searchField = ref('descLong');
const searchValue = ref('');

const countryHash = ref([]);
const countryCurrency = ref({});
const showItemFilter = ref(false);
const showDescFilter = ref(false);
const showDescLongFilter = ref(false);
const showUnitsFilter = ref(false);
const geoip = ref({});

const rates = ref([]);
const options_items = ref([]);
const itemCode = ref(null);

const gChartWidth = screenWidth.value > 420 ? 400 : (screenWidth.value - 12 - 5);
const gChartHeight = gChartWidth == 400 ? 250 : (screenWidth.value *65/100) - 20;
console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth,gChartHeight);
const options = {
  region: 150,
  colorAxis: {colors: ['#0000ff']},
  backgroundColor: '#81d4fa',
  datalessRegionColor: '#f8bbd0',
  //defaultColor: '#f5f5f5',
  width:  gChartWidth,
  height: gChartHeight,
};

const chart_settings = {
  packages: ["geochart", "map"],
  mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
};

const gchartEvents = ref({
  regionClick: () => {
    const selection = getSelection();
    console.log(selection);
    console.log("T");
  },
});

const onHover = (data) => {
    console.log('HOVER',data.target.src);
    hoverImage.value = data.target.src;
    hover.value = !hover.value;
};

const chart_coutries = computed(() => {
    let countries = [["Country", "Count"]];

    for (let i=0; i < settingsStore.ccountry_list.length ; i++) {
        if (settingsStore.ccountry_list[i].offline == (settingsStore.online ? 'N' : 'Y') || settingsStore.online == true)
            countries.push([settingsStore.ccountry_list[i].name, settingsStore.products_count[settingsStore.ccountry_list[i].code] ]);
    }
    return countries;
})


const tproducts = computed(() => {
  console.log("PR=", products);
  console.log("CC=", countryCurrency.value);
  return products.value.map((p) => {
    const prod = { ...p };
    prod.currency = countryCurrency.value[prod.countryName];
    if (currencyHash.value[prod.currency])
      prod.calcPrice = prod.salesPrice / currencyHash.value[prod.currency];
    else {
      prod.calcPrice = prod.salesPrice;
      prod.currency = "EUR";
    }
    if (prod.tag == "NONE") prod.tag = "";
    prod.salesPrice = Math.round(prod.salesPrice * 100) / 100;
    prod.calcPrice =
      Math.round(prod.calcPrice * settingsStore.currencyCoef * 100) / 100;
    console.log('CHA=',currencyHash.value[prod.currency]);
    prod.rate =
      Math.round((currencyHash.value[prod.currency] == undefined? 1.0 : currencyHash.value[prod.currency]  ) / (settingsStore.currency != "EUR" ? currencyHash.value[settingsStore.currency] : 1.0)*100)/100;
    if (prod.tag != null && prod.tag.length > 1) prod.tag = prod.tag.replace(/_/g, " ");
    return prod;
  });
});
const bodyRowClassNameFunction = (item) => {
  if (item.country == settingsStore.country.code) return "result-country";
};
const filterOptions = computed(() => {
  const filterOptionsArray = [];
  if (productsCriteria.value != "All" && productsCriteria.value != null) {
    filterOptionsArray.push({
      field: "item",
      comparison: "=",
      criteria: productsCriteria.value,
    });
  }
  if (descCriteria.value != "All" && descCriteria.value != null) {
    filterOptionsArray.push({
      field: "desc",
      comparison: "=",
      criteria: descCriteria.value,
    });
  }
  if (unitsCriteria.value != "All" && unitsCriteria.value != null) {
    filterOptionsArray.push({
      field: "units",
      comparison: "=",
      criteria: unitsCriteria.value,
    });
  }
  return filterOptionsArray;
});

let uniqProducts = computed(() => {
  var output = ["All"];
  var keys = [];
  options_items.value.forEach((element) => {
    var key = element.item;
    if (keys.indexOf(key) === -1) {
      keys.push(key);
      output.push(element.item);
    }
  });
  console.log("OUT", output);
  return output;
});

let uniqDesc = computed(() => {
  var output = ["All"];
  var keys = [];
  options_items.value.forEach((element) => {
    var key = element.desc;
    if (keys.indexOf(key) === -1) {
      keys.push(key);
      output.push(element.desc);
    }
  });
  console.log("OUT2", output);
  return output;
});

let uniqUnits = computed(() => {
  var output = ["All"];
  var keys = [];
  options_items.value.forEach((element) => {
    var key = element.units;
    if (keys.indexOf(key) === -1) {
      keys.push(key);
      output.push(element.units);
    }
  });
  console.log("OUT3", output);
  return output;
});

const productsCriteria = ref(uniqProducts.value[0]);
const descCriteria = ref(uniqDesc.value[0]);
const unitsCriteria = ref(uniqUnits.value[0]);

const type = "GeoChart";
settingsStore.field = sdropdown.value[0];

const ccodes = ref([]);
const ccountry = ref([]);

const ccountry_list = ref(["TEST"]);
const currencyHash = ref({});
const currency = ref([]);

const items = ref([]);

const hrates = ref([
  { text: "Currency", value: "currency", sortable: true },
  { text: "Country", value: "country_name", sortable: true },
  { text: "Rate", value: "rate", sortable: true },
]);
// { "country": "AT", "code": "50161321", "url": "https://www.ikea.com/at/de/p/hol-aufbewahrungstisch-akazie-50161321/", "name": "HOL", "typeName": "Aufbewahrungstisch", "mainImageUrl": "https://www.ikea.com/at/de/images/products/hol-aufbewahrungstisch-akazie__0104310_pe251255_s5.jpg", "itemNoGlobal": "50161321", "salesPrice": "80.99", "tag": "FAMILY_PRICE", "last_mod": "2023-12-03 16:44:24" },
const hproducts = ref([
  { text: "Country", value: "countryName", sortable: true },
  { text: "Tag", value: "tag", sortable: true },
  { text: "Local Price", value: "salesPrice", sortable: true },
  { text: "Cur", value: "currency", sortable: false },
  { text: "Rate", value: "rate" },
  { text: "Price", value: "calcPrice", sortable: true },
]);
const hresults = ref([
  { text: "Code", value: "code", sortable: true },
 // { text: "Name of product", value: "item", sortable: true },
 // { text: "Description", value: "desc", sortable: true },
  { text: "Description Long", value: "descLong", sortable: true },
  { text: "Units", value: "units", sortable: true },
  { text: "Price", value: "price", sortable: true },
  { text: "Image", value: "img", sortable: false },
]);

const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const fetch = async () => {
  try {
    const response = await axios.get(route("ccountry.active"));
    ccountry.value = response.data;
    let aCntry = ccountry.value.map((country) => [country.country_name]);
    settingsStore.ccountry_filter.push(...aCntry);

    ccountry_list.value = ccountry.value.map((country) => country.country_name);
    var i = 1;
    items.value = ccountry.value.map((country) => {
      return {
        country: country.country_name,
        currency: country.currency_code,
        id: i++,
      };
    });
    console.log("TEST=", settingsStore.ccountry_filter, ccountry_list.value);
    const response2 = await axios.get(route("settings.index"));
    settingsStore.settings = response2.data;
    console.log("SETTINGS=",settingsStore.settings);

    const response3 = await axios.get(route("products.count"));
    settingsStore.products_count = Object.fromEntries(
      response3.data.map((c) => [c.country, c.cnt])
    );
    console.log("PC=",settingsStore.products_count);


  } catch (e) {
    const response = await Swal.fire({
      title: __("are you want to try again") + "?",
      text: __(`${e}`),
      icon: "question",
      showCancelButton: true,
      showCloseButton: true,
    });

    response.isConfirmed && fetch();
  }
};

const fetch_rates = async () => {
  try {
    const response = await axios.get(route("rates.index"));
    rates.value = response.data;
    currency.value = rates.value.map((currency) => currency.currency);
    countryCurrency.value = Object.fromEntries(
      rates.value.map((currency) => [currency.country_name, currency.currency])
    );
    currencyHash.value = Object.fromEntries(
      rates.value.map((currency) => [currency.currency, currency.rate])
    );

    currency.value.unshift("EUR");
    console.log("RATE=", rates.value);
    console.log("HASH=", currencyHash.value);
  } catch (e) {
    const response = await Swal.fire({
      title: __("are you want to try again") + "?",
      text: __(`${e}`),
      icon: "question",
      showCancelButton: true,
      showCloseButton: true,
    });

    response.isConfirmed && fetch();
  }
};

const fetch_ccodes = async () => {
  try {
    const response2 = await axios.get(route("geo.ip.get"));
    geoip.value = response2.data;

    const response = await axios.get(route("ccountry.codes"));
    ccodes.value = response.data;
    ccodes.value = Object.entries(ccodes.value)
      .map(([k, v]) => {
        if (v !== null) return { country: k, code: v };
      })
      .filter((n) => n);
    console.log("ccodes=", ccodes.value);
  } catch (e) {
    const response = await Swal.fire({
      title: __("are you want to try again") + "?",
      text: __(`${e}`),
      icon: "question",
      showCancelButton: true,
      showCloseButton: true,
    });

    response.isConfirmed && fetch();
  }
};

const async_search = async () => {
  if (settingsStore.text.length < 2) return;

  try {
    let country = null;
    if (settingsStore.country.code !== undefined) country = settingsStore.country.code;

    console.log('SETTINGS',settingsStore.country);
    console.log('URL',route("products.search", ['all', settingsStore.text, country]));
    const response = await axios.get(route("products.search", ['all', settingsStore.text, country]));

    options_items.value = response.data.map((i) => {
      return {
        item: i.name,
        desc: i.typeName,
        img: i.mainImageUrl,
        code: i.code,
        url: i.url,
        price: parseFloat(i.salesPrice),
        units: i.priceUnit,
        descLong: i.mainImageAlt,
        globalCode: i.itemNoGlobal,
      };
    });
    console.log("VALUES=", options_items.value);

    productsCriteria.value = null;
  } catch (e) {
    const response = await Swal.fire({
      title: __("are you want to try again") + "?",
      text: __(`${e}`),
      icon: "question",
      showCancelButton: true,
      showCloseButton: true,
    });

    response.isConfirmed && fetch();
  }
};

function customLabel({ item, desc, code }) {
  //console.log(item);
  return `${item} - ${desc} - ${code}`;
}

const clear_all = () => {
    settingsStore.text = '';
    products.value = [];
    options_items.value = [];
}

onMounted(fetch);
onMounted(fetch_rates);
onMounted(fetch_ccodes);

const showRow = async (item) => {
  console.log("ITEM=", item);

  itemCode.value = item.code;
  try {
    const response = await axios.post(route("products.compare"), {
      codes: item.globalCode,
      countries: settingsStore.countries,
      currency: settingsStore.currency,
      online: settingsStore.online,
    });

    products.value = response.data.products;
    countryHash.value = response.data.countryHash;
    console.log("TEST=", response.data);
  } catch (e) {
    const response = await Swal.fire({
      title: __("are you want to try again") + "?",
      text: __(`${e}`),
      icon: "question",
      showCancelButton: true,
      showCloseButton: true,
    });

    response.isConfirmed && fetch();
  }
};

const submit = () => {
  console.log("ITEM=", form);
  if (settingsStore.codes.length == 0) {
    Swal.fire({
      title: "Empty code",
      text: "You must enter product!",
      icon: "error",
    });
    return false;
  }
  settingsStore.post(route("products.compare"));
};

const selectedRowClassNameFunction = (item) => {
  if (item.code == itemCode.value) return 'selected-row';
};


</script>
<template>
  <GuestLayout>

    <div class="flex flex-wrap gap-2 justify-center align-middle">

            <div id="popup-modal" tabindex="-1" :class="'hidden'" class="absolute inset-y-1/3 left-1/3 sm:inset-10 sm:left-10 z-50 justify-center items-center w-full  max-h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <button @click="hover=true" type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
                <span class="sr-only">Close modal</span>
            </button>
            <div class="p-4 md:p-5 text-center">


                <img :src="hoverImage"/>
                <!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                    Yes, I'm sure
                </button> -->
                <button @click="hover=true" data-modal-hide="popup-modal" type="button" class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
            </div>
        </div>
    </div>

        </div>
      <div class="flex flex-col start-0 row-start-1">
        <div
          class="justify-center rounded-md border-black border-8 max-h-[328px]"
        >
          <GChart
            :events="gchartEvents"
            :type="type"
            :data="chart_coutries"
            :options="options"
            :settings="chart_settings"
          />
        </div>


        <div class="flex flex-col start-0">
          <span class="font-extrabold font-mono"
            >Results <b v-if="itemCode">for {{ itemCode }}</b>
          </span>
        </div>
        <div>
          <EasyTable
            id="results"
            table-class-name="results"
            sortBy="countryName"
            :rows-per-page="30"
            :headers="hproducts"
            :items="tproducts"
            :body-row-class-name="bodyRowClassNameFunction"
            :hide-rows-per-page="true"
            :hide-footer="true"
            alternating
          >
            <template #item-countryName="{ countryName, url }">
              <a class="underline" target="_blank" :href="url">{{
                countryName
              }}</a>
            </template>
          </EasyTable>
          <div v-if="settingsStore.online == true">Online</div>
          <div v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{ settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
        </div>
      </div>
      <div class="mr-auto">
        <form @submit.prevent="submit">
          <div>
          <div class="flex flex-col start-0">
            <div class="w-full">
              <div>
                <span class="font-extrabold font-mono">Search:</span>
              </div>
              <div>
                <input
                  class="rounded-md w-full"
                  :placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
                  v-model="settingsStore.text"
                  @input="async_search"
                />
              </div>
            </div>
            <div>
              <div>
                <span class="font-extrabold font-mono">Online:</span>
              </div>
              <div>
                <input
                  type="checkbox"
                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                  v-model="settingsStore.online"
                  @input="clear_all"
                />
              </div>
            </div>
          </div>



        </div>
        </form>
        <div class="mt-5">
            <input v-if="showDescLongFilter" placeholder="Search in long description" class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full" type="text" v-model="searchValue">
          <EasyTable
            class="none"
            :rows-per-page="20"
            :headers="hresults"
            :items="options_items"
            :search-field="searchField"
            :search-value="searchValue"
            :body-row-class-name="selectedRowClassNameFunction"
            @click-row="showRow"
            :filter-options="filterOptions"
            alternating
          >
            <template #item-img="{ code, img }">
                <img
                v-on:mouseover="onHover"
                class="h-12"
                :src="img"
                :alt="code"
              />
            </template>
            <template #header-item="header">
              <div class="filter-column">
                <img
                  :src="filterimg"
                  class="filter-icon"
                  @click.stop="showItemFilter = !showItemFilter"
                />
                {{ header.text }}
                <div
                  class="filter-menu filter-sport-menu"
                  v-if="showItemFilter"
                >
                  <multiselect
                    v-model="productsCriteria"
                    :options="uniqProducts"
                  ></multiselect>
                </div>
              </div>
            </template>
            <template #header-descLong="header">
              <div class="filter-column">
                <img
                  :src="searchimg"
                  class="filter-icon"
                  @click.stop="showDescLongFilter = !showDescLongFilter"
                />
                {{ header.text }}
              </div>
            </template>
            <template #header-desc="header">
              <div class="filter-column">
                <img
                  :src="filterimg"
                  class="filter-icon"
                  @click.stop="showDescFilter = !showDescFilter"
                />
                {{ header.text }}
                <div
                  class="filter-menu filter-sport-menu"
                  v-if="showDescFilter"
                >
                  <multiselect
                    v-model="descCriteria"
                    :options="uniqDesc"
                  ></multiselect>
                </div>
              </div>
            </template>
            <template #header-units="header">
              <div class="filter-column">
                <img
                  :src="filterimg"
                  class="filter-icon"
                  @click.stop="showUnitsFilter = !showUnitsFilter"
                />
                {{ header.text }}
                <div
                  class="filter-menu filter-menu-units"
                  v-if="showUnitsFilter"
                >
                  <multiselect
                    v-model="unitsCriteria"
                    :options="uniqUnits"
                  ></multiselect>
                </div>
              </div>
            </template>
          </EasyTable>
        </div>
      </div>
      <div></div>
    </div>
  </GuestLayout>
</template>
<style>
@import "vue3-easy-data-table/dist/style.css";

.filter-column {
  display: flex;
  align-items: center;
  justify-items: center;
  position: relative;
}

.filter-icon {
  cursor: pointer;
  display: inline-block;
  width: 15px !important;
  height: 15px !important;
  margin-right: 4px;
}

.filter-menu {
  padding: 5px 5px;
  z-index: 1;
  position: absolute;
  top: 40px;
  width: 328px;

  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.filter-menu-units {
  padding: 5px 5px;
  z-index: 1;
  position: absolute;
  top: 40px;
  width: 128px;
}

.selected-row   {
  --easy-table-body-row-hover-background-color: #e5e6f9;
  --easy-table-body-row-background-color: #e5e6f9;
  --easy-table-body-row-font-color: #000;
  --easy-table-body-even-row-background-color: #e5e6f9;
}

:root .result-country {
  --easy-table-body-row-background-color: #e5e6f9;
  --easy-table-body-even-row-background-color: #e5e6f9;
}
</style>


