// IRAN bounds, by this order:
// [North, East]
// [South, West]
var bounds = [
  [46.9130026312, 77.6166317076],
  [17.5782370061, 32.5092252948]
];

// Create leaflet map client
var map = L.map('map', {
  maxBounds: bounds,
  minZoom: 5
}).setView([34.620, 52.471], 5);

// Create map tile layer
L.tileLayer('https://testmap.141.ir/141map/{z}/{x}/{y}.png', {}).addTo(map);

// Project icons
var blueIcon = L.divIcon({
  className: 'custom-div-icon',
  html: "<span class='beacon beacon-blue'></span>",
  iconSize: [30, 42],
  // iconAnchor: [15, 42]
});
var greenIcon = L.divIcon({
  className: 'custom-div-icon',
  html: "<span class='beacon beacon-green'></span>",
  iconSize: [30, 42],
  // iconAnchor: [15, 42]
});
var yellowIcon = L.divIcon({
  className: 'custom-div-icon',
  html: "<span class='beacon beacon-yellow'></span>",
  iconSize: [30, 42],
  // iconAnchor: [15, 42]
});
var redIcon = L.divIcon({
  className: 'custom-div-icon',
  html: "<span class='beacon beacon-red'></span>",
  iconSize: [30, 42],
  // iconAnchor: [15, 42]
});

var provinces = [
  {
    id: 1,
    name: 'آذربایجان شرقی',
    lat: 37.9211202,
    lng: 46.6821517
  },
  {
    id: 2,
    name: 'آذربایجان غربی',
    lat: 37.7416484,
    lng: 45.0207638
  },
  {
    id: 3,
    name: 'اردبیل',
    lat: 38.4583983,
    lng: 47.9313001
  },
  {
    id: 4,
    name: 'اصفهان',
    lat: 33.196733,
    lng: 50.7884216,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 33.096733,
        lng: 50.7884216,
      },
      {
        id: 2,
        type: 1,
        lat: 33.396733,
        lng: 50.7884216
      },
      {
        id: 3,
        type: 2,
        lat: 33.196733,
        lng: 50.4884216
      },
      {
        id: 4,
        type: 2,
        lat: 33.196733,
        lng: 50.8884216
      },
      {
        id: 5,
        type: 3,
        lat: 33.196733,
        lng: 51.1884216
      },
      {
        id: 6,
        type: 4,
        lat: 33.496733,
        lng: 50.9884216
      },
      {
        id: 7,
        type: 2,
        lat: 33.696733,
        lng: 50.1884216
      },
      {
        id: 8,
        type: 3,
        lat: 33.296733,
        lng: 51.4884216
      },
    ]
  },
  {
    id: 32,
    name: 'البرز',
    lat: 35.9960,
    lng: 50.9289
  },
  {
    id: 5,
    name: 'ایلام',
    lat: 33.1545696,
    lng: 46.7576343
  },
  {
    id: 6,
    name: 'بوشهر',
    lat: 28.8936645,
    lng: 51.3204877
  },
  {
    id: 7,
    name: 'تهران',
    lat: 35.5021945,
    lng: 51.3269098
  },
  {
    id: 8,
    name: 'چهارمحال و بختیاری',
    lat: 32.0163307,
    lng: 50.685709
  },
  {
    id: 29,
    name: 'خراسان جنوبی',
    lat: 33.0006776,
    lng: 58.3262335
  },
  {
    id: 30,
    name: 'خراسان رضوی',
    lat: 35.756361,
    lng: 59.1280992,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 35.756361,
        lng: 59.1280992
      },
      {
        id: 2,
        type: 1,
        lat: 36.756361,
        lng: 59.3280992
      },
      {
        id: 3,
        type: 1,
        lat: 35.456361,
        lng: 60.1280992
      },
      {
        id: 4,
        type: 2,
        lat: 35.956361,
        lng: 60.5280992
      },
      {
        id: 5,
        type: 3,
        lat: 34.156361,
        lng: 60.5280992
      },
      {
        id: 6,
        type: 4,
        lat: 34.756361,
        lng: 59.6280992
      },
      {
        id: 7,
        type: 1,
        lat: 34.156361,
        lng: 58.6280992
      },
      {
        id: 8,
        type: 2,
        lat: 35.156361,
        lng: 58.4280992
      },
      {
        id: 9,
        type: 2,
        lat: 36.056361,
        lng: 58.1280992
      },
    ]
  },
  {
    id: 31,
    name: 'خراسان شمالی',
    lat: 37.5378855,
    lng: 56.9526137
  },
  {
    id: 10,
    name: 'خوزستان',
    lat: 31.5535141,
    lng: 49.0077168
  },
  {
    id: 11,
    name: 'زنجان',
    lat: 36.515854,
    lng: 48.4777616,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 36.515854,
        lng: 48.4777616
      },
      {
        id: 2,
        type: 1,
        lat: 35.415854,
        lng: 47.5777616
      },
      {
        id: 3,
        type: 2,
        lat: 37.315854,
        lng: 48.3777616
      },
      {
        id: 4,
        type: 4,
        lat: 36.915854,
        lng: 48.5777616
      },
      {
        id: 5,
        type: 2,
        lat: 37.115854,
        lng: 49.4777616
      },
    ]
  },
  {
    id: 12,
    name: 'سمنان',
    lat: 35.4380386,
    lng: 54.8626294
  },
  {
    id: 13,
    name: 'سیستان و بلوچستان',
    lat: 28.1292481,
    lng: 60.8236848,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 29.1292481,
        lng: 60.8236848
      },
      {
        id: 2,
        type: 1,
        lat: 28.1292481,
        lng: 61.8236848
      },
      {
        id: 3,
        type: 1,
        lat: 27.1292481,
        lng: 61.8236848
      },
      {
        id: 4,
        type: 2,
        lat: 28.1292481,
        lng: 59.8236848
      },
      {
        id: 5,
        type: 3,
        lat: 30.1292481,
        lng: 60.4236848
      },
      {
        id: 6,
        type: 4,
        lat: 31.1292481,
        lng: 61.4236848
      },
      {
        id: 7,
        type: 4,
        lat: 27.7292481,
        lng: 60.8236848
      },
      {
        id: 8,
        type: 2,
        lat: 27.1292481,
        lng: 59.2236848
      },
    ]
  },
  {
    id: 14,
    name: 'فارس',
    lat: 29.299051,
    lng: 53.218456
  },
  {
    id: 28,
    name: 'قزوین',
    lat: 36.0156291,
    lng: 49.8398161
  },
  {
    id: 26,
    name: 'قم',
    lat: 34.7191915,
    lng: 51.0122844
  },
  {
    id: 16,
    name: 'کردستان',
    lat: 35.672803,
    lng: 47.0124376
  },
  {
    id: 15,
    name: 'کرمان',
    lat: 29.571858,
    lng: 57.301047
  },
  {
    id: 17,
    name: 'کرمانشاه',
    lat: 34.3789744,
    lng: 46.7010122
  },
  {
    id: 18,
    name: 'کهگیلویه و بویراحمد',
    lat: 30.8143476,
    lng: 50.8661454
  },
  {
    id: 27,
    name: 'گلستان',
    lat: 37.1984436,
    lng: 55.070672
  },
  {
    id: 19,
    name: 'گیلان',
    lat: 37.5115476,
    lng: 49.3554429
  },
  {
    id: 20,
    name: 'لرستان',
    lat: 33.5372643,
    lng: 48.2435197
  },
  {
    id: 21,
    name: 'مازندران',
    lat: 36.3159159,
    lng: 51.8968597
  },
  {
    id: 22,
    name: 'مرکزی',
    lat: 34.5302705,
    lng: 49.7864561
  },
  {
    id: 23,
    name: 'هرمزگان',
    lat: 27.7198095,
    lng: 56.335807
  },
  {
    id: 24,
    name: 'همدان',
    lat: 34.973321,
    lng: 48.6555779
  },
  {
    id: 25,
    name: 'یزد',
    lat: 32.2452686,
    lng: 55.105172,
    projectCoordinates: [
      {
        id: 1,
        type: 1,
        lat: 32.1452686,
        lng: 55.205172,
      },
      {
        id: 2,
        type: 1,
        lat: 31.8452686,
        lng: 55.205172,
      },
      {
        id: 3,
        type: 1,
        lat: 31.8452686,
        lng: 55.405172,
      },
      {
        id: 4,
        type: 2,
        lat: 31.6452686,
        lng: 55.605172,
      },
      {
        id: 5,
        type: 2,
        lat: 32.3452686,
        lng: 55.205172,
      },
      {
        id: 6,
        type: 3,
        lat: 32.9452686,
        lng: 55.105172,
      },
      {
        id: 7,
        type: 3,
        lat: 33.2452686,
        lng: 55.905172,
      },
    ]
  },
];

$('.map-container > svg #iran path').on('click', function () {
  // console.log(this.id);
  // console.log(provinces.find(entry => entry.id == parseInt(this.id.substring(3))));

  let selectedProvince = provinces.find(entry => entry.id == parseInt(this.id.substring(3)));

  areaChart = new Chart(areaChartCanvas, {
    type: 'line',
    data: areaChartData2,
    options: areaChartOptions
  });

  let numberOfProjects = $('.numberOfProjects');
  let numberOfActiveProjects = $('#numberOfActiveProjects');
  let numberOfOpenedProjects = $('#numberOfOpenedProjects');
  let numberOfFinishedProjects = $('#numberOfFinishedProjects');
  let numberOfStoppedProjects = $('#numberOfStoppedProjects');

  jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 700 }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      numberOfProjects.text(Math.ceil(this.Counter));
    }
  });
  jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 400 }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      numberOfActiveProjects.text(Math.ceil(this.Counter));
    }
  });
  jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 250 }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      numberOfOpenedProjects.text(Math.ceil(this.Counter));
    }
  });
  jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 100 }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      numberOfFinishedProjects.text(Math.ceil(this.Counter));
    }
  });
  jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 50) }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      numberOfStoppedProjects.text(Math.ceil(this.Counter));
    }
  });

  map.flyTo([selectedProvince.lat, selectedProvince.lng], 9);

  for (let index = 0; index < selectedProvince.projectCoordinates.length; index++) {
    switch (selectedProvince.projectCoordinates[index].type) {
      case 1: {
        L.marker(
          [selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
          { icon: blueIcon }
        ).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
          .addTo(map);
        break;
      }
      case 2: {
        L.marker(
          [selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
          { icon: greenIcon }
        ).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
          .addTo(map);
        break;
      }
      case 3: {
        L.marker(
          [selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
          { icon: yellowIcon }
        ).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
          .addTo(map);
        break;
      }
      case 4: {
        L.marker(
          [selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
          { icon: redIcon }
        ).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
          .addTo(map);
        break;
      }
    }
  }
});

function getPopupContent(type) {
  // switch (type) {
  //   case 1: {
  //     // Active
  //     break;
  //   }
  //   case 2: {
  //     // Opened
  //     break;
  //   }
  //   case 3: {
  //     // Finished
  //     break;
  //   }
  //   case 4: {
  //     // Stopped
  //     break;
  //   }
  // }

  return "\
  <div class=\"popup\">\
    <span style=\"color:#FF5630 ; font-size:12px\">نوع پروژه: </span><span>احداث</span>\
    <br><span style=\"color:#FF5630 ;font-size:12px\">وضعیت پروژه: </span><span>" + getProjectStatus(type) + "</span>\
    <br><span style=\"color:#FF5630 ;font-size:12px\">درصد پیشرفت فیزیکی پروژه: </span><span>" + getProjectProgress() + "%</span>\
  </div>";
}

function getProjectStatus(type) {
  switch (type) {
    case 1:
      return 'فعال';
    case 2:
      return 'افتتاح شده';
    case 3:
      return 'خاتمه یافته';
    case 4:
      return 'متوقف شده';
  }
}

function getProjectProgress() {
  let percentage = Math.floor(Math.random() * 100) + 1;     // returns a random integer from 0 to 99
  return percentage;
}