const uip_country_list = {
  AF: "Afghanistan",
  AX: "&Aring;land Islands",
  AL: "Albania",
  DZ: "Algeria",
  AS: "American Samoa",
  AD: "Andorra",
  AO: "Angola",
  AI: "Anguilla",
  AG: "Antigua and Barbuda",
  AR: "Argentina",
  AM: "Armenia",
  AW: "Aruba",
  AU: "Australia",
  AT: "Austria",
  AZ: "Azerbaijan",
  BS: "Bahamas (the)",
  BH: "Bahrain",
  BD: "Bangladesh",
  BB: "Barbados",
  BY: "Belarus",
  BE: "Belgium",
  BZ: "Belize",
  BJ: "Benin",
  BM: "Bermuda",
  BT: "Bhutan",
  BO: "Bolivia (Plurinational State of)",
  BA: "Bosnia and Herzegovina",
  BW: "Botswana",
  BV: "Bouvet Island",
  BR: "Brazil",
  IO: "British Indian Ocean Territory (the)",
  BN: "Brunei Darussalam",
  BG: "Bulgaria",
  BF: "Burkina Faso",
  BI: "Burundi",
  KH: "Cambodia",
  CV: "Cabo Verde",
  CM: "Cameroon",
  CA: "Canada",
  CT: "Catalonia",
  KY: "Cayman Islands (the)",
  CF: "Central African Republic (the)",
  TD: "Chad",
  CL: "Chile",
  CN: "China",
  CX: "Christmas Island",
  CC: "Cocos (Keeling) Islands (the)",
  CO: "Colombia",
  KM: "Comoros",
  CD: "Congo (the Democratic Republic of the)",
  CG: "Congo (the)",
  CK: "Cook Islands (the)",
  CR: "Costa Rica",
  HR: "Croatia",
  CU: "Cuba",
  CY: "Cyprus",
  CZ: "Czech Republic (the)",
  DK: "Denmark",
  DJ: "Djibouti",
  DM: "Dominica",
  DO: "Dominican Republic (the)",
  EC: "Ecuador",
  EG: "Egypt",
  SV: "El Salvador",
  EN: "England",
  GQ: "Equatorial Guinea",
  ER: "Eritrea",
  EE: "Estonia",
  ET: "Ethiopia",
  EU: "European Union",
  FK: "Falkland Islands (the) [Malvinas]",
  FO: "Faroe Islands (the)",
  FJ: "Fiji",
  FI: "Finland",
  FR: "France",
  GF: "French Guiana",
  PF: "French Polynesia",
  TF: "French Southern Territories (the)",
  GA: "Gabon",
  GM: "Gambia (the)",
  GE: "Georgia",
  DE: "Germany",
  GH: "Ghana",
  GI: "Gibraltar",
  GR: "Greece",
  GL: "Greenland",
  GD: "Grenada",
  GP: "Guadeloupe",
  GU: "Guam",
  GT: "Guatemala",
  GN: "Guinea",
  GW: "Guinea-Bissau",
  GY: "Guyana",
  HT: "Haiti",
  HM: "Heard Island and McDonald Islands",
  VA: "Holy See (the)",
  HN: "Honduras",
  HK: "Hong Kong",
  HU: "Hungary",
  IS: "Iceland",
  IN: "India",
  ID: "Indonesia",
  IR: "Iran (Islamic Republic of)",
  IQ: "Iraq",
  IE: "Ireland",
  IL: "Israel",
  IT: "Italy",
  JM: "Jamaica",
  JP: "Japan",
  JO: "Jordan",
  KZ: "Kazakhstan",
  KE: "Kenya",
  KI: "Kiribati",
  KP: "Korea (the Democratic People's Republic of)",
  KR: "Korea (the Republic of)",
  KW: "Kuwait",
  KG: "Kyrgyzstan",
  LA: "Lao People's Democratic Republic (the)",
  LV: "Latvia",
  LB: "Lebanon",
  LS: "Lesotho",
  LR: "Liberia",
  LY: "Libya",
  LI: "Liechtenstein",
  LT: "Lithuania",
  LU: "Luxembourg",
  MO: "Macao",
  MK: "Macedonia (the former Yugoslav Republic of)",
  MG: "Madagascar",
  MW: "Malawi",
  MY: "Malaysia",
  MV: "Maldives",
  ML: "Mali",
  MT: "Malta",
  MH: "Marshall Islands (the)",
  MQ: "Martinique",
  MR: "Mauritania",
  MU: "Mauritius",
  YT: "Mayotte",
  MX: "Mexico",
  FM: "Micronesia (Federated States of)",
  MD: "Moldova (the Republic of)",
  MC: "Monaco",
  MN: "Mongolia",
  ME: "Montenegro",
  MS: "Montserrat",
  MA: "Morocco",
  MZ: "Mozambique",
  MM: "Myanmar",
  NA: "Namibia",
  NR: "Nauru",
  NP: "Nepal",
  NL: "Netherlands",
  AN: "Netherlands Antilles",
  NC: "New Caledonia",
  NZ: "New Zealand",
  NI: "Nicaragua",
  NE: "Niger (the)",
  NG: "Nigeria",
  NU: "Niue",
  NF: "Norfolk Island",
  MP: "Northern Mariana Islands (the)",
  NO: "Norway",
  OM: "Oman",
  PK: "Pakistan",
  PW: "Palau",
  PS: "Palestine, State of",
  PA: "Panama",
  PG: "Papua New Guinea",
  PY: "Paraguay",
  PE: "Peru",
  PH: "Philippines (the)",
  PN: "Pitcairn",
  PL: "Poland",
  PT: "Portugal",
  PR: "Puerto Rico",
  QA: "Qatar",
  RE: "R&eacute;union",
  RO: "Romania",
  RU: "Russian Federation (the)",
  RW: "Rwanda",
  SH: "Saint Helena, Ascension and Tristan da Cunha",
  KN: "Saint Kitts and Nevis",
  LC: "Saint Lucia",
  PM: "Saint Pierre and Miquelon",
  VC: "Saint Vincent and the Grenadines",
  WS: "Samoa",
  SM: "San Marino",
  ST: "Sao Tome and Principe",
  SA: "Saudi Arabia",
  AB: "Scotland",
  SN: "Senegal",
  RS: "Serbia",
  CS: "Serbia and Montenegro",
  SC: "Seychelles",
  SL: "Sierra Leone",
  SG: "Singapore",
  SK: "Slovakia",
  SI: "Slovenia",
  SB: "Solomon Islands",
  SO: "Somalia",
  ZA: "South Africa",
  GS: "South Georgia and the South Sandwich Islands",
  ES: "Spain",
  LK: "Sri Lanka",
  SD: "Sudan (the)",
  SR: "Suriname",
  SJ: "Svalbard and Jan Mayen",
  SZ: "Swaziland",
  SE: "Sweden",
  CH: "Switzerland",
  SY: "Syrian Arab Republic",
  TW: "Taiwan (Province of China)",
  TJ: "Tajikistan",
  TZ: "Tanzania, United Republic of",
  TH: "Thailand",
  TL: "Timor-Leste",
  TG: "Togo",
  TK: "Tokelau",
  TO: "Tonga",
  TT: "Trinidad and Tobago",
  TN: "Tunisia",
  TR: "Turkey",
  TM: "Turkmenistan",
  TC: "Turks and Caicos Islands (the)",
  TV: "Tuvalu",
  UG: "Uganda",
  UA: "Ukraine",
  AE: "United Arab Emirates (the)",
  GB: "United Kingdom",
  UM: "United States Minor Outlying Islands (the)",
  US: "United States of America (the)",
  US: "United States",
  UY: "Uruguay",
  UZ: "Uzbekistan",
  VU: "Vanuatu",
  VE: "Venezuela (Bolivarian Republic of)",
  VN: "Viet Nam",
  VG: "Virgin Islands (British)",
  VI: "Virgin Islands (U.S.)",
  WA: "Wales",
  WF: "Wallis and Futuna",
  EH: "Western Sahara",
  YE: "Yemen",
  ZM: "Zambia",
  ZW: "Zimbabwe",
};

export function moduleName() {
  return "country-visits";
}

export function moduleData() {
  return {
    props: {
      cardData: Object,
      overviewData: Object,
    },
    data: function () {
      return {
        countries: Object,
        chartData: [],
        cardOptions: this.cardData,
        sub: true,
        analytics: false,
        error: false,
        errorMsg: "",
      };
    },
    mounted: function () {
      this.getData();
    },
    watch: {
      overviewData: {
        handler(newValue, oldValue) {
          this.getData();
        },
        deep: true,
      },
      cardOptions: {
        handler(newValue, oldValue) {
          this.$emit("card-change", newValue);
        },
        deep: true,
      },
    },
    computed: {
      isGAconnected() {
        return this.analytics;
      },
      returnGAdata() {
        return this.overviewData.globalDataObject.data.analytics;
      },
    },
    methods: {
      getData() {
        let self = this;
        let countryData = [];
        self.error = false;

        //CHECK IF WE ARE STILL LOADING
        if (self.overviewData.globalDataObject.loading) {
          return;
        }

        //ANALYTICS SERVER ERROR
        if (!self.returnGAdata) {
          self.error = true;
          self.errorMsg = self.overviewData.translations.analyticsDataUnavailable;
          return;
        }

        //ANALYTICS ERROR
        if (self.returnGAdata.error) {
          self.error = true;
          self.errorMsg = self.returnGAdata.message;
          return;
        }

        //IF NO ACCOUNT
        if (self.returnGAdata.no_account && self.returnGAdata.no_account == true) {
          self.loading = false;
          self.analytics = false;
          return;
        }

        self.analytics = true;
        self.tableData = self.returnGAdata.countries.report.data;

        for (var i = 0; i < self.tableData.length; i++) {
          var item = self.tableData[i];
          countryData[item.name] = item.value;
        }
        this.countries = countryData;
      },
      defaultImage(e) {
        jQuery(e.target).replaceWith('<span class="material-icons-outlined uip-margin-right-s">flag</span>');
      },
      returnWidth(perc) {
        return "width:" + perc + "%";
      },
      getFlag(search) {
        var cCode = "";
        cCode = this.getKeyByValue(uip_country_list, search);

        if (cCode && cCode != "") {
          cCode = cCode.toLowerCase();
        }
        return "https://flagcdn.com/16x12/" + cCode + ".png";
      },
      getKeyByValue(object, search) {
        return Object.keys(object).find((key) => object[key] === search);
      },
    },
    template:
      '<div class="uip-padding-s uip-position-relative" :accountConnected="isGAconnected">\
        <div v-if="error" class="uip-background-red-wash uip-padding-s uip-border-round">{{errorMsg}}</div>\
        <premium-overlay v-if="sub && overviewData.account != true" :translations="overviewData.translations"></premium-overlay>\
        <template v-else>\
  	  	  <loading-placeholder v-if="overviewData.globalDataObject.loading == true"></loading-placeholder>\
          <connect-google-analytics @account-connected="getData()" :translations="overviewData.translations" v-if="overviewData.globalDataObject.loading != true && !isGAconnected && !error"></connect-google-analytics>\
          <div v-if="overviewData.globalDataObject.loading != true && !overviewData.ui.editingMode  && isGAconnected" class="uip-overflow-auto">\
            <uip-country-chart v-if="cardOptions.hideMap != \'true\'" :translations="overviewData.translations" :cdata="countries" :dates="overviewData.dateRange"></uip-country-chart>\
            <!-- TABLE HEADERS -->\
            <div class="uip-w-100p uip-min-w-300 uip-overflow-auto">\
              <div class="uip-flex uip-margin-bottom-s">\
                  <div class="uip-text-muted uip-text-bold uip-flex-grow">{{overviewData.translations.country}}</div>\
                  <div class="uip-text-muted uip-text-bold uip-margin-left-s uip-w-80 uip-text-right">{{overviewData.translations.visits}}</div>\
                  <div class="uip-text-muted uip-text-bold uip-margin-left-s uip-w-100 uip-text-right">{{overviewData.translations.change}}</div>\
              </div>\
              <!-- TABLE BODY -->\
              <div>\
                <div v-for="item in tableData" class="uip-margin-bottom-s">\
                    <div class="uip-flex uip-flex-center uip-margin-bottom-xs">\
                      <div class="uip-flex-grow uip-flex uip-flex-center uip-overflow-hidden uip-text-ellipsis uip-no-wrap uip-overflow-hidden uip-text-ellipsis uip-no-wrap">\
                        <img :src="getFlag(item.name)" alt="flag" @error="defaultImage" class="uip-w-20 uip-margin-right-xxs">\
                        <div class="uip-overflow-hidden uip-text-ellipsis uip-no-wrap uip-max-w-200">{{item.name}}</div>\
                      </div>\
                      <div class="uip-margin-left-s uip-w-80 uip-text-right uip-text-bold uip-flex-no-shrink">{{item.value}}</div>\
                      <div class="uip-margin-left-s uip-w-100 uip-text-right uip-flex uip-flex-right uip-flex-no-shrink">\
                        <div class="uip-background-primary-wash uip-border-round uip-padding-xxs uip-text-bold uip-flex uip-text-xs" \
                        :class="{\'uip-background-red-wash\' : item.change < 0}">\
                          <span v-if="item.change > 0" class="material-icons-outlined" >expand_less</span>\
                          <span v-if="item.change < 0" class="material-icons-outlined" >expand_more</span>\
                          {{item.change}}%\
                        </div>\
                      </div>\
                    </div>\
                    <div class="uip-w-100p uip-h-2 uip-background-muted uip-border-round uip-overflow-hidden">\
                      <div class="uip-background-primary uip-h-100p" :style="returnWidth(item.percent_total)"></div>\
                    </div>\
                </div>\
              </div>\
            <!-- END OF TABLE -->\
            </div>\
            <form v-if="overviewData.ui.editingMode" class="uk-form-stacked" style="padding: var(--a2020-card-padding);">\
                <div class="">\
                    <div class="uip-text-bold uip-margin-bottom-xs">{{overviewData.translations.showmap}}</div>\
                    <label class="uip-switch">\
                      <input type="checkbox" v-model="cardOptions.hideMap">\
                      <span class="uip-slider"></span>\
                    </label>\
                </div>\
            </form>\
          </div>\
        </template>\
      </div>',
  };
  return compData;
}

export default function () {
  console.log("Loaded");
}
