class MWM_Settings_Importer {
  constructor() {
    this.geojsondocumentToImport = false;
    this.gljsdocumentToImport = false;
    this.importInstallationFile = false;
    this.featuresImported = 0;
    this.upgradeMessage = '';
    this.initializedInputs = [];
    this.jsonImport = {
      categories : [], point : [], line : [], polygon : []
    }
    this.postsImported = 0;
    this.fetchedFields = {};
    this.currentFile = false;
    this.currentCSVImport = []
    this.currentImportCategory = false
  }

  setUpgradeMessage(message) {
    this.upgradeMessage = window.mapster_settings.strings["Upgrade Message 1"];
  }

  async doGeoJSONImport() {
    if(this.geojsondocumentToImport) {
      try {
        const response = await this.doGeoJSONImportPost(this.geojsondocumentToImport, this.jsonImport, this.currentImportCategory, this.featuresImported);
        this.displayAfterImport(response.count);
      } catch (err) {
        jQuery('.mapster-import-error').html(window.mapster_settings.strings["Error"] + this.upgradeMessage);
      }
    } else {
      window.alert(window.mapster_settings.strings["Please Upload"]);
    }
  }

  async geoJSONUploaded(e) {
    let that = this;
    jQuery('#geojson-import-data-summary h4 span').html(e.target.files[0].type);
    if(e.target.files[0].name.indexOf('.json') > -1 || e.target.files[0].name.indexOf('.geojson') > -1) {
      const fileContents = await new Response(e.target.files[0]).json()
      that.importGeoJSON(fileContents)
    } else if(e.target.files[0].name.indexOf('.kml') > -1) {
      const reader = new FileReader();
      reader.readAsText(event.target.files[0]);
      reader.onload = async () => {
        const geojson = toGeoJSON.kml(new DOMParser().parseFromString(reader.result, "text/xml"));
        that.importGeoJSON(geojson)
      }
    } else if(e.target.files[0].name.indexOf('.gpx') > -1) {
      const reader = new FileReader();
      reader.readAsText(event.target.files[0]);
      reader.onload = async () => {
        const geojson = toGeoJSON.gpx(new DOMParser().parseFromString(reader.result, "text/xml"));
        that.importGeoJSON(geojson)
      }
    } else {
      const reader = new FileReader();
      reader.readAsArrayBuffer(event.target.files[0]);
      reader.onload = async () => {
        const geojson = await shp(reader.result);
        that.importGeoJSON(geojson)
      }
    }
  }

  importGeoJSON(file) {
    if(!file) {
      window.alert(window.mapster_settings.strings["Please Upload"]);
    } else {
      this.showDataAboutImport(file)
      this.geojsondocumentToImport = file;
    }
  }

  isGoodProjection(features) {
    let isEPSG3857 = true;
    const errorFeatures = features.filter(feature => this.centerProjection(turf.center(feature).geometry.coordinates));
    if(errorFeatures.length > 0) {
      isEPSG3857 = false;
    }
    return isEPSG3857;
  }

  centerProjection(center) {
    if(center[0] < -180 || center[0] > 180 || center[1] < -90 || center[1] > 90) {
      return true;
    } else {
      return false;
    }
  }

  tryReprojection(file) {
    let newGeoJSON = JSON.parse(JSON.stringify(file));
    newGeoJSON.features.forEach(feature => {
      feature.geometry.coordinates = this.recursiveReproject(feature.geometry.coordinates);
    })
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(newGeoJSON));
    var dlAnchorElem = document.createElement('a');
    dlAnchorElem.setAttribute("href", dataStr);
    dlAnchorElem.setAttribute("download", "mapster-reprojection.json");
    dlAnchorElem.click();
  }

  recursiveReproject(array) {
    if(isNaN(array[0])) {
      array.forEach((item, index) => {
        array[index] = recursiveReproject(item);
      })
      return array;
    } else {
      const fromProjection = jQuery('#mapster-from-projection').val() !== '' ? jQuery('#mapster-from-projection').val() : 'EPSG:3857';
      return proj4(fromProjection, 'EPSG:4326', array)
    }
  }

  showDataAboutImport(file) {
    if(file.type) {
      jQuery('.mapster-import-options').fadeIn();
      jQuery("#geojson-import-button").fadeIn();
      jQuery('#geojson-import-data-summary').fadeIn();

      this.currentFile = file;

      this.advancedOptions();

      const types = [... new Set(file.features.map(item => item.geometry.type))];
      jQuery('#geojson-import-data-summary table tbody').html('');
      if(!this.isGoodProjection(file.features)) {
        jQuery('#mapster-projection-warning').fadeIn();
        jQuery(document).on('click', '#mapster-try-reproject', () => {
          this.tryReprojection(file);
        })
      }
      types.forEach(type => {
        const theseFeatures = file.features.filter(item => item.geometry.type === type);
        let allProperties = {};
        theseFeatures.forEach(feature => {
          for(let property in feature.properties) {
            allProperties[property] = typeof feature.properties[property];
          }
        })
        const allHaveProperties = theseFeatures.every(feature => this.hasProperties(feature, allProperties));
        const allHaveTypesRight = theseFeatures.every(feature => this.hasRightType(feature, allProperties));
        jQuery('#geojson-import-data-summary table tbody').append(`
            <tr>
              <td>${type}</td>
              <td>${theseFeatures.length}</td>
              <td><a href="#" data-index="feature-${Math.floor(Math.random()*theseFeatures.length)}" class="mapster-example-feature-${type}">${window.mapster_settings.strings["Example Feature"]}</a></td>
              <td>${allHaveProperties&&allHaveTypesRight ? `
                <span class="tooltip dashicons dashicons-yes-alt">
                  <span class="tooltiptext">${window.mapster_settings.strings["Looks Good"]}</span>
                </span>` : `
                ${!allHaveProperties ?
                  `<span class="tooltip dashicons dashicons-warning">
                    <span class="tooltiptext">${window.mapster_settings.strings["Missing Properties"]}</span>
                  </span>`
                : ''}
                ${!allHaveTypesRight ?
                  `<span class="tooltip dashicons dashicons-warning">
                    <span class="tooltiptext">${window.mapster_settings.strings["Inconsistent Data"]}</span>
                  </span>`
                : ''}
                `}
              </td>
            </tr>
        `);
        jQuery(document).on('click', `.mapster-example-feature-${type}`, function() {
          let thisIndex = jQuery(this).data('index').replace('feature-', '');
          alert(JSON.stringify(theseFeatures[thisIndex], null, 2));
        })
      })
    }
  }

  advancedOptions(file) {}

  hasProperties(feature, allProperties) {
    let hasPropertiesOfType = true;
    for(let property in allProperties) {
      if(!feature.properties[property]) {
        hasPropertiesOfType = false;
      }
    }
    return hasPropertiesOfType;
  }

  hasRightType(feature, allProperties) {
    let hasPropertiesOfType = true;
    for(let property in allProperties) {
      if(feature.properties[property] && typeof feature.properties[property] !== allProperties[property]) {
        hasPropertiesOfType = false;
      }
    }
    return hasPropertiesOfType;
  }

  doGeoJSONImportPost(geojson, import_json, import_category, features_imported) {
    jQuery('.mapster-map-loader').show();
    return fetch(window.mapster_settings.rest_url + 'mapster-wp-maps/import-geojson', {
      headers : {
        'X-WP-Nonce' : window.mapster_settings.nonce,
        'Content-Type' : 'application/json'
      },
      method : "POST",
      body : JSON.stringify({
        file : geojson,
        import_json : import_json,
        category : import_category,
        features_imported : features_imported
      })
    }).then(resp => resp.json());
  }

  displayAfterImport(count) {
    jQuery('.mapster-map-loader').hide();
    this.featuresImported = this.featuresImported + count;
    jQuery('.geojson-import-result span').html(this.featuresImported);
    jQuery('.geojson-import-result').fadeIn();
    jQuery('.geojson-import-progress').val((this.featuresImported/this.geojsondocumentToImport.features.length) * 100)
    jQuery('.mapster-import-error').html(window.mapster_settings.strings["Seem Wrong"] + this.upgradeMessage);
  }

  async glJSgeoJSONUploaded(e) {
    const fileContents = await new Response(e.target.files[0]).json()
    this.importGLJSGeoJSON(fileContents)
  }

  importGLJSGeoJSON(file) {
    if(!file) {
      window.alert(window.mapster_settings.strings["Please Upload"]);
    } else {
      this.gljsdocumentToImport = file;
    }
  }

  doGLJSImport() {
    let that = this;
    if(this.gljsdocumentToImport) {
      fetch(window.mapster_settings.rest_url + 'mapster-wp-maps/import-gl-js', {
        headers : {
          'X-WP-Nonce' : window.mapster_settings.nonce,
          'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify({
          file : that.gljsdocumentToImport,
          category : jQuery('#gl-js-import-category').val()
        })
      }).then(resp => resp.json()).then(response => {
        jQuery('#gl-js-import-result span').html(response.count);
        jQuery('#gl-js-import-result').fadeIn();
      })
    } else {
      window.alert(window.mapster_settings.strings["Please Upload"]);
    }
  }

  createNewTileset() {}
  selectExistingTileset() {}
  updateTileset() {}

  exportMapster() {}
  uploadMapster(e) {}
  importMapster() {}

  verifyCSV() {}
  doCSVImport() {}

  init() {
    let that = this;
    that.setUpgradeMessage();
    jQuery(document).on('change', '#geojson-import-file', function(e) {
      that.geoJSONUploaded(e);
    })
    jQuery(document).on('change', '#gl-js-import-file', function(e) {
      that.glJSgeoJSONUploaded(e);
    })
    jQuery(document).on('change', '#geojson-import-category', function(e) {
      that.currentImportCategory = jQuery('#geojson-import-category').val()
    })
    jQuery(document).on('change', '#csv-import-category', function(e) {
      that.currentImportCategory = jQuery('#csv-import-category').val()
    })
    jQuery(document).on('click', '#geojson-import-button', function() {
      that.doGeoJSONImport();
    })
    jQuery(document).on('click', '#gl-js-import-button', function() {
      that.doGLJSImport();
    })

    jQuery(document).on('click', '#export-mapster-installation', function() {
      that.exportMapster();
    })
    jQuery(document).on('change', '#upload-mapster-installation', function(e) {
      that.uploadMapster(e);
    })
    jQuery(document).on('click', '#import-mapster-installation', function() {
      that.importMapster();
    })

    jQuery(document).on('click', '#existing-tileset-source', function() {
      that.selectExistingTileset();
    })
    jQuery(document).on('click', '#new-tileset-source', function() {
      that.createNewTileset();
    })
    jQuery(document).on('click', '#update-tileset-source-button', function() {
      that.updateTileset();
    })

    jQuery(document).on('click', '#mapster-csv-verify', function() {
      that.verifyCSV();
    })

    jQuery(document).on('click', '#mapster-csv-import', function() {
      that.doCSVImport();
    })

    jQuery(document).on('click', '.nav-tab', function() {
      jQuery(this).siblings().each(function() {
        jQuery(this).removeClass('nav-tab-active');
      })
      jQuery(this).addClass('nav-tab-active');
      jQuery(this).parent().siblings().each(function() {
        if(jQuery(this).hasClass('nav-box')) {
          jQuery(this).removeClass('nav-box-active');
        }
      })
      jQuery('#' + jQuery(this).attr('id') + '-options').addClass('nav-box-active');
    })
  }

}