var markerList = [];
var markerLayers = null;

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\">\
      <div class=\"popupTitle\">\
        <img src=\"dist/images/road.svg\" alt=\"\">\
        <span class=\"popupHeader\">پهنه بندی جاده های روستایی</span>\
      </div>\
      <div class=\"popupContent\">\
      <div class=\"popUpBox\" style=\"width:75px\"><span>نوع عملیات</span><div class=\"popUpBoxContent\">"+ operationType + "</div></div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>وضعیت فعلی پروژه</span><div class=\"popUpBoxContent\">"+ getProjectStatus(type) + "</div></div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>اداره کل</span><div class=\"popUpBoxContent\">"  + selectedProvince + "</div> </div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>درصد پیشرفت فیزیکی</span><div class=\"popUpBoxContent\">" + getProjectProgress() + "%</div></div>\
    </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 + 1
  return percentage;
}

function getParameterByName(name) {
  let url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var operationType = getParameterByName('operationType');
var projectStatus = getParameterByName('projectStatus');
var selectedProvince = getParameterByName('selectedProvince');
var selectedTown = getParameterByName('selectedTown');
var sourceLat = getParameterByName('sourceLat');
var sourceLng = getParameterByName('sourceLng');

L.marker(
  [sourceLat, sourceLng],
  { icon: greenIcon }
).bindPopup(getPopupContent(returnOperationType(projectStatus)), { 'className': 'customPopupStyle' })
  .addTo(map);

function returnOperationType(status) {
  switch (status) {
    case 'فعال': {
      return 1;
    }
    case 'متوقف': {
      return 4;
    }
    case 'خاتمه‌یافته': {
      return 3;
    }
  }
}

// console.log(operationType);
// console.log(projectStatus);
// console.log(selectedProvince);
// console.log(selectedTown);
// console.log(sourceLat);
// console.log(sourceLng);

$.post('https://141.ir/api/camera', function (data) {
  markerLayers = L.markerClusterGroup();

  for (let index = 0; index < data.length; index++) {
    let marker = L.marker(
      [data[index].lat, data[index].lng],
      { icon: blueIcon }
    ).bindPopup(getCustomPopupContent(data[index]), { 'className': 'customPopupStyle' });
    markerList.push(marker);
  }
  markerLayers.addLayers(markerList);
  map.addLayer(markerLayers);
});

function getCustomPopupContent(data) {
  return "\
    <div class=\"popup\">\
      <div class=\"popupTitle\">\
        <img src=\"dist/images/road.svg\" alt=\"\">\
        <span class=\"popupHeader\">پهنه بندی جاده های روستایی</span>\
      </div>\
      <div class=\"popupContent\">\
      <div class=\"popUpBox\" style=\"width:75px\"><span>نوع عملیات</span><div class=\"popUpBoxContent\">"+ generateRandom(1) + "</div></div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>وضعیت فعلی پروژه</span><div class=\"popUpBoxContent\">"+ generateRandom(2) + "</div></div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>اداره کل</span><div class=\"popUpBoxContent\">"  + returnProvinceString(data.ProvinceID) + "</div> </div>\
      <div class=\"popUpBox\" style=\"width:75px\"><span>درصد پیشرفت فیزیکی</span><div class=\"popUpBoxContent\">" + getProjectProgress() + "%</div></div>\
    </div>";
}

function generateRandom(index) {
  switch (index) {
    case 1: {
      // Operation Type
      let randomNumber = Math.floor(Math.random() * 2) + 1; // 1 or 2
      if (randomNumber == 1) return 'احداث'
      else return 'نگهداری';
    }
    case 2: {
      // Project Status
      let randomNumber = Math.floor(Math.random() * 3) + 1; // 1, 2, or 3 
      switch (randomNumber) {
        case 1: return 'فعال';
        case 2: return 'متوقف';
        case 3: return 'خاتمه یافته';
      }
    }
  }
}

function returnProvinceString(provinceId) {
  switch (provinceId) {
    case '1': return 'مازندران';
    case '2': return 'تهران';
    case '3': return 'فارس';
    case '4': return 'خراسان رضوی';
    case '5': return 'آذربایجان غربی';
    case '6': return 'آذربایجان شرقی';
    case '7': return 'اردبیل';
    case '8': return 'گیلان';
    case '9': return 'زنجان';
    case '10': return 'کردستان';
    case '11': return 'کرمانشاه';
    case '12': return 'همدان';
    case '13': return 'قزوین';
    case '14': return 'البرز';
    case '15': return 'گلستان';
    case '16': return 'خراسان شمالی';
    case '17': return 'سمنان';
    case '18': return 'قم';
    case '19': return 'مرکزی';
    case '20': return 'لرستان';
    case '21': return 'ایلام';
    case '22': return 'اصفهان';
    case '23': return 'یزد';
    case '24': return 'خراسان جنوبی';
    case '25': return 'چهارمحال و بختیاری';
    case '26': return 'خوزستان';
    case '27': return 'کهگیلویه و بویر احمد';
    case '28': return 'بوشهر';
    case '29': return 'کرمان';
    case '30': return 'سیستان و بلوچستان';
    case '31': return 'هرمزگان';
  }
}