<script setup>

// import { defineComponent, h } from 'vue';
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue';
import Swal from 'sweetalert2';
import LogoIkea from '@/assets/Ikea_logo.svg';
import Multiselect from 'vue-multiselect';
import { GChart } from 'vue-google-charts';
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
import {
  FwbNavbar,
  FwbNavbarCollapse,
  FwbNavbarLink,
  FwbNavbarLogo,
} from 'flowbite-vue';
import axios from 'axios';
import IkeaLogo from './Ikea/IkeaLogo.vue';
const type = 'GeoChart';

const ccountry = ref([]);
const ccountry_filter = ref([['Country'],]);
const ccountry_list = ref(['TEST']);
const selected = ref(null);

const options = {
  region: 150,

  width: 700,
  height: 500,
};

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

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);

    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()
  }
}
function selectCountry(item,id) {
  let cCntry = [ ['Country'], ];
  let aCntry = selected.value.map((country) => [country]);
  
  ccountry_filter.value = cCntry;
  ccountry_filter.value.push(...aCntry);
}
onMounted(fetch);
</script>

<template>
  <fwb-navbar>
    <template #logo>
      <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
        IKEA Price Craweler
      </fwb-navbar-logo>
    </template>
    <template #default="{ isShowMenu }">
      <fwb-navbar-collapse :is-show-menu="isShowMenu">
        <fwb-navbar-link is-active link="#">
          Home
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Services
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Pricing
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Contact
        </fwb-navbar-link>
      </fwb-navbar-collapse>
    </template>
  </fwb-navbar>
  <div class="m-3">
  <div class="grid gap-2">
    <div class="justify-center rounded-md border-black border-8 max-w-fit">
      <GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
    </div>
    <div class="max-">
      <multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
      </multiselect>
    </div>
  </div>
  </div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
