<script setup>

// import { defineComponent, h } from 'vue';
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue';
import Swal from 'sweetalert2';

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';
const type = 'GeoChart';


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

const data = [
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['France', 600],
  ['RU', 700],
];

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
    ccountry_filter.value = ccountry.value.map((country) => [ country.country_name ]);
    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()
  }
}

onMounted(fetch);
</script>

<template>

    <fwb-navbar>
      <template #logo>
        <fwb-navbar-logo alt="IKEA Price Craweler" image-url="/images/logo.svg" 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>
  
  <GChart
    :type="type"
    :data="ccountry_filter"
    :options="options"
    :settings="chart_settings"
  />

   <multiselect
      :multiple="true"
      v-model="selected"
      :options="ccountry_list">
  </multiselect>

</template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>