var beansUrlParameter = function(sParam) {
  var sPageURL = window.location.search.substring(1),
      sURLVariables = sPageURL.split('&'),
      sParameterName,
      i;
  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] === sParam) {
        return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
}

var getBaseConfig = function(urlFromRequest) {
  return {
    address: '',
    useGroundElevation: false,
    elevation: 0,
    canonicalUrl: urlFromRequest
  };
}

var convertUnitsArr2 = function(address, unitsArr, hideMarkers) {
  var convertedArr = [];
  for (var i = 0; i < unitsArr.length; i++) {
    var bedText = unitsArr[i].bed ? (unitsArr[i].bed + ' Bed') : 'Studio';
    var td = new Date().toISOString().substring(0, 10);
    var as = (unitsArr[i].availability ? ('on ' + unitsArr[i].availability) : 'Now');
    if (unitsArr[i].availability && unitsArr[i].availability <= td) {
      as = 'Now';
    }
    var onPreviewData;
    if (unitsArr.floorplanImg) {
      onPreviewData = [
        {
          value: bedText + ' / ' + unitsArr[i].bath + ' Bath / ' + (unitsArr[i].sqft ? unitsArr[i].sqft.toLocaleString() : '0') + ' sq. ft.'
        },
        {
          value: 'img:' + unitsArr[i].floorplanImg
        },
        {
          value: '$' + (unitsArr[i].rent ? unitsArr[i].rent.toLocaleString() : '0') + '/ mo'
        },
        {
          value: 'Available ' + as
        }
      ];
    } else {
      onPreviewData = [
        {
          value: bedText + ' / ' + unitsArr[i].bath + ' Bath / ' + (unitsArr[i].sqft ? unitsArr[i].sqft.toLocaleString() : '0') + ' sq. ft.'
        },
        {
          value: '$' + (unitsArr[i].rent ? unitsArr[i].rent.toLocaleString() : '0') + '/ mo'
        },
        {
          value: 'Available ' + as
        }
      ];
    }
    convertedArr.push({
      address: address,
      unit: unitsArr[i].unit,
      options: {
        markers: {
          display: hideMarkers ? false : true
        },
        poi: [
          {
            name: "ALL",
            display: false
          },
          {
            name: "CLUBHOUSE",
            display: true
          },
          {
            name: "SWIMMINGPOOL",
            display: true
          },
          {
            name: "OFFICE",
            display: true
          },
          {
            name: "GYM",
            display: true
          },
          {
            name: "MAILROOM",
            display: true
          },
          {
            name: "LAUNDRY",
            display: true
          },
          {
            name: "PLAYGROUND",
            display: true
          }
        ],
        onPreviewData: onPreviewData,
        onClickData: {
          name: unitsArr[i].unit ? unitsArr[i].unit.replaceAll('||', ' - ') : '',
          bed: unitsArr[i].bed,
          bath: unitsArr[i].bath,
          sqft: unitsArr[i].sqft,
          rent: unitsArr[i].rent,
          floorplanImg: unitsArr[i].floorplanImg,
          availability: unitsArr[i].availability,
          link: unitsArr[i].link ? unitsArr[i].link.replaceAll('&amp;', '&') : ''
        }
      }
    });
  }
  return convertedArr;
}

var convertUnitsArr = function(config, unitsArr, hideMarkers, skipSort) {
  var addressAndUnitWithOptions;
  if (unitsArr.length === 0) {
    unitsArr.push({
      unit: ''
    });
    addressAndUnitWithOptions = convertUnitsArr2(config.address, unitsArr, hideMarkers);
    addressAndUnitWithOptions[0].isPlaceHolder = true;
  } else {
    if (!skipSort) {
      unitsArr.sort((a, b) => {
        var aa = a.unit ? a.unit : '';
        var bb = b.unit ? b.unit : '';
        return aa.localeCompare(bb);
      });
    }
    addressAndUnitWithOptions = convertUnitsArr2(config.address, unitsArr, hideMarkers);
  }

  if (config.unitShapeConfig) {
    for (var i = 0; i < addressAndUnitWithOptions.length; i++) {
      addressAndUnitWithOptions[i].options.unitShape = config.unitShapeConfig(addressAndUnitWithOptions[i]);
    }
  }

  if (config.poi) {
    for (var i = 0; i < addressAndUnitWithOptions.length; i++) {
      for (var j = 0; j < config.poi.length; j++) {
        addressAndUnitWithOptions[i].options.poi.push(config.poi[j]);
      }
    }
  }

  return addressAndUnitWithOptions;
}

var commonImmersives = [
  {
    url: "https://gis-server.beans.ai/arcgis/rest/services/Hosted/Immersive_Layers/FeatureServer/0",
    elevationInfo: {
      mode: "absolute-height",
      offset: 0.5,
    },
    renderer: {
      type: "unique-value",
      field: "type",
      uniqueValueInfos: [
        {
          value: "Apricot",
          symbol: {
            type: "web-style",
            name: "Prunus",
            styleName: "EsriRealisticTreesStyle"
          }
        },
        {
          value: "Mountain Mahogany",
          symbol: {
            type: "web-style",
            name: "Cercocarpus",
            styleName: "EsriRealisticTreesStyle"
          }
        },
        {
          value: "Rose",
          symbol: {
            type: "web-style",
            name: "Rosa",
            styleName: "EsriRealisticTreesStyle"
          }
        }
      ]
    },
    isFeature: true
  },
  {
    url: "https://gis-server.beans.ai/arcgis/rest/services/Hosted/Immersive_Layers/FeatureServer/1",
    elevationInfo: {
      mode: "absolute-height",
      offset: 0.5,
    },
    renderer: {
      type: "unique-value",
      field: "type",
      uniqueValueInfos: [
        {
          value: "Walkway",
          symbol: {
            type: "simple-line",
            width: 4,
            color: "#fcf5de"
          }
        },
        {
          value: "Road",
          symbol: {
            type: "simple-line",
            width: 16,
            color: "#eeeeee"
          }
        }
      ]
    },
    isFeature: true
  },
  {
    url: "https://gis-server.beans.ai/arcgis/rest/services/Hosted/Immersive_Layers/FeatureServer/2",
    elevationInfo: {
      mode: "absolute-height",
      offset: 0.5,
    },
    renderer: {
      type: "unique-value",
      field: "type",
      uniqueValueInfos: [
        {
          value: "Lawn",
          symbol: {
            type: "simple-fill",
            outline: {
              width: 0
            },
            color: "#b2c388"
          }
        }
      ]
    },
    isFeature: true
  },
  {
    url: "https://gis-server.beans.ai/arcgis/rest/services/Hosted/Immersive_Layers/FeatureServer/2",
    elevationInfo: {
      mode: "absolute-height",
      offset: 1.0,
    },
    renderer: {
      type: "unique-value",
      field: "type",
      uniqueValueInfos: [
        {
          value: "Water",
          symbol: {
            type: "simple-fill",
            outline: {
              width: 0
            },
            color: "#a5c2d1"
          }
        }
      ]
    },
    isFeature: true
  },
];

var getDisplayOptions = function(
  config,
  unitShape_, // Default shape
  selectedUnitShape_, // Selected shape
  selectableUnitShape_, // Selectable shape
  hoverUnitShape_
) {
  return {
    propertyAddress: config.address,

    offsetGroundElevation: config.elevation,
    useGroundElevation: config.useGroundElevation,

    showUnitList: true,
    showUnitShape: true,

    showDirections: false,
    showPath: false,

    camera: config.camera,
    mobileCamera: config.mobileCamera,
    renameAmenities: config.renameAmenities ? config.renameAmenities : null,

    shadowModeUnitShape: config.shadowModeUnitShape ? config.shadowModeUnitShape : {
      fillColor: '#ffffff',
      fillOpacity: 1.0,
    },
    neighborModeUnitShape: config.neighborModeUnitShape ? config.neighborModeUnitShape : {
      fillColor: '#D8D7D4',
      fillOpacity: 1.0,
    },
    unitShape: config.unitShape ? config.unitShape : {
      fillColor: '#DDE3E0',
      fillOpacity: 1.0,
      strokeWeight: 1.0,
      strokeOpacity: 0.5,
      strokeColor: '#000000',
      ...unitShape_
    },
    selectedUnitShape: config.selectedUnitShape ? config.selectedUnitShape : {
      fillColor: '#A6671D',
      fillOpacity: 1.0,
      strokeWeight: 1.0,
      strokeOpacity: 1.0,
      strokeColor: '#ffffff',
      ...selectedUnitShape_
    },
    selectableUnitShape: config.selectableUnitShape ? config.selectableUnitShape : {
      fillColor: '#24453E',
      fillOpacity: 1.0,
      strokeWeight: 1.0,
      strokeOpacity: 1.0,
      strokeColor: '#ffffff',
      ...selectableUnitShape_
    },
    satelliteModeUnitShape: config.satelliteModeUnitShape ? config.satelliteModeUnitShape : {
      fillColor: '#ffffff',
      fillOpacity: 1.0,
    },
    neighborShape: config.neighborShape,
    immersiveModeUnitShape: config.immersiveModeUnitShape,
    poiShape: config.poiShape,

    hoverUnitShape: hoverUnitShape_ ? hoverUnitShape_ : null,
    // mobileUnitShape: {
    //   fillColor: '#ffffff',
    //   fillOpacity: 0.2,
    //   strokeWeight: 0.5,
    //   strokeOpacity: 0.2,
    //   strokeColor: '#000000',
    // }
  };
}

var BeansH2 = function() {
};

BeansH2.prototype.getConfigFromUrl = function() {
  var canonicalUrl = urlFromRequest ? urlFromRequest : window.location.hostname;
  if (beansUrlParameter('canonicalUrl')) {
    canonicalUrl = beansUrlParameter('canonicalUrl');
  }
  var baseConfig = getBaseConfig(canonicalUrl);

  var config = {};
  config['www.h2realestate.com'] = {
    address: '402 Crestone Ln, Colorado Springs, CO',
    //elevation: 150,
    //useGroundElevation: true,
    ready: 'apartments',
    propertyId: '1301506',
    camera: {tilt: 67.74324480140189, heading: 328.8826921367458, position: {x: -104.83249654256369, y: 38.811988643339994, z: 132.60394262056798}}
  };
  config['dashboard.appfoliowebsites.com'] = config['www.h2realestate.com'];
  config['localhost'] = config['www.h2realestate.com'];

  if (config[canonicalUrl]) {
    return {...baseConfig, ...config[canonicalUrl]};
  }

  return baseConfig;
}

BeansH2.prototype.render = function(be1, addressFromRequest) {
  var so = this;
  // return;

  var x = document.getElementsByClassName("map-container");

  var y = document.getElementsByClassName("map-canvas");
  if (y && y.length) {
    y[0].style.display = "none";
  }
  var z = document.getElementsByClassName("reset-map");
  if (z && z.length) {
    z[0].style.display = "none";
  }
  if (x && x.length) {
    var bodyDiv = createDivWithClassAndId('', 'body-inner-1');
    x[0].appendChild(bodyDiv);
    bodyDiv.style.display = "block";
  } else {
    return;
  }

  var config = so.getConfigFromUrl();
  var address = config.address;
  if (!address) {
    address = addressFromRequest;
  }

  var json = {
  	"auth": {
  		"type" : "basic"
  	},
  	"requestId" : 15,
  	"method": {
  		"name": "getUnitsAvailabilityAndPricing",
  		"version":"r1",
  		"params": {
  			"propertyId" : config.propertyId,
  			"availableUnitsOnly" : "0",
  			"unavailableUnitsOnly" : "0",
  			"skipPricing" : "0",
  			"showChildProperties" : "0",
  			"includeDisabledFloorplans" : "0",
  			"includeDisabledUnits" : "0",
  			"showUnitSpaces" : "0",
  			"useSpaceConfiguration" : "0",
  			"allowLeaseExpirationOverride" : "0"
  		}
  	}
  };

  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://cmsmultifamily.entrata.com/api/v1/propertyunits');
  xhr.setRequestHeader('Content-Type', 'APPLICATION/JSON; CHARSET=UTF-8');
  xhr.setRequestHeader('Authorization', 'Basic YmVhbnMuYWlfNzQ0QGNtc211bHRpZmFtaWx5OmFWNShmQXp7OH4=');
  xhr.onreadystatechange = function() {
    if (xhr.readyState !== DONE || xhr.status !== OK) {
      return;
    }
    json = JSON.parse(xhr.responseText);
    var floorplans = {};
    if (json.response.result.Properties) {
      for (var i in json.response.result.Properties.Property[0].Floorplans.Floorplan) {
        var fp = json.response.result.Properties.Property[0].Floorplans.Floorplan[i];
        var val = '' + fp.Identification.IDValue;
        var beds = 0;
        var baths = 0;
        var sqft = 0;

        for (var j in fp.Room) {
          var rm = fp.Room[j];
          if (rm['@attributes']['RoomType'] === 'Bedroom') {
            beds = rm.Count;
          }
          if (rm['@attributes']['RoomType'] === 'Bathroom') {
            baths = rm.Count;
          }
        }
        if (fp.SquareFeet && fp.SquareFeet['@attributes'] && fp.SquareFeet['@attributes'].Min) {
          sqft = fp.SquareFeet['@attributes'].Min;
        } else if (fp.SquareFeet && fp.SquareFeet['@attributes'] && fp.SquareFeet['@attributes'].Max) {
          sqft = fp.SquareFeet['@attributes'].Max;
        } else if (fp.SquareFeet && fp.SquareFeet['@attributes'] && fp.SquareFeet['@attributes'].Avg) {
          sqft = fp.SquareFeet['@attributes'].Avg;
        }

        floorplans[val] = {
          beds: beds,
          baths: baths,
          sqft: sqft
        };
      }
    }

    var unitsArr = [];
    if (!config.placeHolder && json.response.result.ILS_Units) {
      for (var i in json.response.result.ILS_Units.Unit) {
        var obj = json.response.result.ILS_Units.Unit[i];
        if (!obj['@attributes']['Availability'] || obj['@attributes']['Availability'] !== 'Available') {
          continue;
        }

        var pp = '' + obj['@attributes']['PropertyId'];
        var up = '' + obj['@attributes']['PropertyUnitId'];
        var fp = '' + obj['@attributes']['FloorplanId'];
        var beds = 0;
        var baths = 0;
        var sqft = 0;
        var rent = 0;

        if (obj.Rent && obj.Rent['@attributes'].MinRent) {
          rent = Number(obj.Rent['@attributes'].MinRent.replace(/[^0-9\.]/, ''));
        } else if (obj.Rent && obj.Rent['@attributes'].MaxRent) {
          rent = Number(obj.Rent['@attributes'].MaxRent.replace(/[^0-9\.]/, ''));
        }

        if (floorplans[fp]) {
          beds = floorplans[fp].beds;
          baths = floorplans[fp].baths;
          sqft = floorplans[fp].sqft;
        }
        unitsArr.push({
          unit: (obj['@attributes']['BuildingName'] ? obj['@attributes']['BuildingName'] + '||' : '') + obj['@attributes']['UnitNumber'],
          bed: beds,
          bath: baths,
          sqft: sqft,
          rent: rent,
          link: 'https://' + config.canonicalUrl + '/Apartments/module/application_authentication/popup/false/kill_session/1/property[id]/%20' + pp + '/property_floorplan[id]/' + fp + '/unit_space[id]/' + up + '/show_in_popup/false/from_check_availability/1'
        });
      }
    }

    var addressAndUnitWithOptions = convertUnitsArr(config, unitsArr, true);

    var displayOptions = getDisplayOptions(
      config,
      {
        fillColor: '#EAD6C3',
        fillOpacity: 0.5,
        strokeWeight: 0.5,
        strokeOpacity: 0.2,
        strokeColor: '#000000'
      }, // Default color
      {
        fillColor: '#CDA349',
      }, // Selected color
      {
        fillColor: '#3F1F08',
      } // Selectable color
    );

    be1.render(
      "body-inner-1",
      "bf141afe9917482:3030303233393234663239393462626338373235",
      addressAndUnitWithOptions,
      {
        hideNavigateButton: true,
        hideMyLocationButton: true
      },
      {
        initialMap: "STREET",

        hideBeansCard: true,
        hideFloorSelector: true,
        modernButtons: true,
        showCloseButton: true,
        showNeighbors: false,
        showPOIButton: true,
        showSeparateFacilitiesCard: true,

        initialPosition: {
          address: address
        },

        ...displayOptions
      }
    );
  }.bind(this);
  xhr.send(JSON.stringify(json));
}