<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 { useForm } from '@inertiajs/inertia-vue3'
import axios from 'axios';
import filterimg from '@/assets/eglass-filter.png';


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


const products = ref([]);

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

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

const options = {
  region: 150,

  width: 500,
  height: 310,
};

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

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

let tproducts = computed(() => {
  console.log('PR=', products);
  console.log('CC=', countryCurrency.value);
  return products.value.map((prod) => {
    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 * currencyCoef.value * 100) / 100;
    prod.rate = currencyHash.value[prod.currency];

    return prod;
  })
})

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';
const form = useForm({
  countries: '',
  country: '',
  field: sdropdown.value[0],
  text: '',
  currency: 'EUR',
});

const ccodes = ref([]);
const ccountry = ref([]);
const ccountry_filter = ref([['Country'],]);
const ccountry_list = ref(['TEST']);
const currencyHash = ref({});
const currency = ref([]);
const currencyCoef = ref(1.0);

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]);
    ccountry_filter.value.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=", ccountry_filter.value, ccountry_list.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_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 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);
    const response2 = await axios.get(route('geo.ip.get'));
    geoip.value = response2.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 async_search = async () => {
  if (form.text.length < 2) return;

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

    console.log('SEARCH', route('products.search', [form.field.value, form.text, country]));
    const response = await axios.get(route('products.search', [form.field.value, form.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": i.salesPrice, "units": i.priceUnit, "descLong": i.mainImageAlt } });
    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}`;
}

function selectCountry(item, id) {
  let cCntry = [['Country'],];
  console.log(form.countries);
  let aCntry = form.countries.map((country) => [country]);

  ccountry_filter.value = cCntry;
  ccountry_filter.value.push(...aCntry);
}

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

const showRow = async (item) => {
  console.log('ITEM=', item);
  console.log('FORM=', form);
  itemCode.value = item.code;
  try {
    const response = await axios.post(route('products.compare'), { codes: item.code, countries: form.countries, currency: form.currency })

    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 onSelectCurrency = () => {
  console.log('CURR', form.currency);
  console.log('COEF', currencyCoef.value);

  if (form.currency != 'EUR') currencyCoef.value = currencyHash.value[form.currency];
  else currencyCoef.value = 1.0;
}

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

watch(ccodes, (codes) => {
  console.log('NNN=',codes);
  codes.forEach((c) => { if (c.code == geoip.value.iso_code) form.country = c; });
})
</script>
<template>
  <GuestLayout>
    <div class="flex flex-wrap gap-2 justify-center align-middle ">
      <div class="flex flex-col start-0">
        <div class="justify-center rounded-md border-black border-8 max-h-[328px]">
          <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
            :settings="chart_settings" />
        </div>
        <div>
          <span class="font-extrabold font-mono">Currency recalculation</span>
        </div>
        <div>
          <multiselect v-model="form.currency" :multiple="false" :allow-empty="false" placeholder="Currency"
            :searchable="true" :options="currency" @select="onSelectCurrency" />
        </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 :rows-per-page=25 :headers="hproducts" :items="tproducts" alternating>
            <template #item-countryName="{ countryName, url }">
              <a class="underline" target="_blank" :href="url">{{ countryName }}</a>
            </template>
          </EasyTable>
        </div>
      </div>
      <div class="mr-auto">
        <form @submit.prevent="submit">
          <div class="flex flex-col start-0">
            <span class="font-extrabold font-mono">Countries in which compare</span>
          </div>
          <div>
            <multiselect :close-on-select="false" :multiple="true" v-model="form.countries" :options="ccountry_list"
              @select="selectCountry" @remove="selectCountry">
            </multiselect>
          </div>
          <div class="flex flex-col start-0">
            <span class="font-extrabold font-mono">Country in which search product</span>
          </div>
          <div>
            <multiselect :close-on-select="false" :multiple="false" v-model="form.country" :options="ccodes"
              label="country" track-by="code">
            </multiselect>
          </div>
          <div>
            <span class="font-extrabold font-mono">Search in:</span>
          </div>
          <div>
            <multiselect v-model="form.field" :multiple="false" :searchable="false" :allow-empty="false"
              :options="sdropdown" track-by="value" label="text"></multiselect>
          </div>

          <div>
            <span class="font-extrabold font-mono">Dynamic search:</span>
          </div>
          <div>
            <input class="rounded-md " v-model="form.text" @input="async_search" />
          </div>


        </form>
        <div class="mt-5">
          <EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow"
            :filter-options="filterOptions" alternating>
            <template #item-img="{ code, img }">
              <img 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-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;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

