import React, { Component, Fragment } from "react";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Menu from "@material-ui/core/Menu";
import DashboardAccessComponent from "dashboard-access-library";
import DashboardDevicesComponent from "dashboard-devices-library";
import DashboardGroupsComponent from "dashboard-groups-library";
import DashboardStaysComponent from "dashboard-stays-library";
import { PagginationComponent } from "@virtualkey/vk-ui_plugin-frontend-common-components";
import { Route, Switch as SwitchContainer, Redirect } from "react-router-dom";
import MenuItem from "@material-ui/core/MenuItem";
import { NavLink } from "react-router-dom";
import Button from "@material-ui/core/Button";
import CircleCheckedFilled from "@material-ui/icons/CheckCircle";
import CircleUnchecked from "@material-ui/icons/RadioButtonUnchecked";
import TextField from "@material-ui/core/TextField";
import Checkbox from "@material-ui/core/Checkbox";
import FormControl from "@material-ui/core/FormControl";
import { connect } from "react-redux";

import { Divider } from "@material-ui/core";
import { withRouter } from "react-router-dom";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import gloablConfig from "../Config";
import {
  getPropertiesWithDeviceFilters,
  confirmPropertyDelete,
  getSettingInfo
} from "../middleware/index";
import {
  setSelectedProperty,
  resetAccessData,
  resetDevicesData
} from "../actions/index";
import RemoveProperty from "./RemoveProperty.model";

import axios from "axios";
import Popper from "@material-ui/core/Popper";
import Paper from "@material-ui/core/Paper";

import Grow from "@material-ui/core/Grow";
import MenuList from "@material-ui/core/MenuList";
import DashboardShareKeyComponent from "dashboard-sharekey-library";
import PropertyStatus from "./PropertyStatus/PropertyStatus";
import { propertySearchType as searchType } from "../constants/actionTypes";
import Select from "@material-ui/core/Select";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import Tooltip from "@material-ui/core/Tooltip";


const styles = theme => ({
  root: {
    color: "#0daf63",

    "&$checked": {
      color: "#0daf63"
    }
  },
  hoverColorNext: {
    "&:focu fieldset": {
      borderColor: "red"
    },
    customInputFocused: {
      width: "40%",
      borderColor: "#80bdff",
      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)",
      backgroundColor: "#00FF00"
    }
  },
  checked: {},
  colorBar: {},
  colorChecked: {},
  iOSSwitchBase: {
    "&$iOSChecked": {
      color: theme.palette.common.white,
      "& + $iOSBar": {
        backgroundColor: "#ffffff"
      }
    },
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
      easing: theme.transitions.easing.sharp
    })
  },
  iOSChecked: {
    transform: "translateX(15px)",
    "& + $iOSBar": {
      opacity: 1,
      border: "none"
    }
  },
  iOSBar: {
    borderRadius: 13,
    width: 54,
    height: 26,
    marginTop: -7,
    marginLeft: -28,
    border: "solid 1px",
    borderColor: theme.palette.grey[400],
    backgroundColor: "#ffffff",
    opacity: 1,
    transition: theme.transitions.create(["background-color", "border"])
  },
  iOSIcon: {
    width: 24,
    height: 23,
    marginTop: 11,
    marginRight: 13,
    backgroundColor: "#b6b6b6",
    "&::before": {
      content: "'PMS'",
      color: "#6f6f6f",
      fontSize: "10px",
      position: "absolute",
      right: -5,
      left: "auto",
      top: 23
    }
  },
  iOSIconChecked: {
    boxShadow: theme.shadows[1],
    backgroundColor: "#0daf63",
    marginTop: 11,
    marginRight: -8,
    "&::before": {
      content: "'PMS'",
      color: "#6f6f6f",
      fontSize: "10px",
      position: "absolute",
      left: -8,
      right: "auto",
      top: 24
    }
  }
});
class Dashboard extends Component {
  _isMounted = false;
  showFirstItem = true;
  timer;
  state = {
    propertiesWithDeviceFilters: [
      {
        key: "unlocked",
        id: 0,
        label: "Unlocked",
        icon: "unlocked_unselected.png",
        checkedIcon: "unlocked_selected.png",
        checked: false
      },
      // {
      //   key: "leaked",
      //   id: 1,
      //   label: "Leak",
      //   icon: "leak_unselected.png",
      //   checkedIcon: "leak_selected.png",
      //   checked: false
      // },
      // {
      //   key: "lightsOn",
      //   id: 2,
      //   label: "Lights On",
      //   icon: "lights_on__unselected.png",
      //   checkedIcon: "lights_on_selected.png",
      //   checked: false
      // },
      {
        key: "batteryLow",
        id: 3,
        label: "Battery Low",
        icon: "battery_low__unselected.png",
        checkedIcon: "battery_low_selected.png",
        checked: false
      },
      {
        key: "batteryCritical",
        id: 4,
        label: "Battery Critical",
        icon: "battery_critical__unselected.png",
        checkedIcon: "battery_critical_selected.png",
        checked: false
      },
      {
        key: "lockOffline",
        id: 5,
        label: "Lock Offline",
        icon: "custom-icons/lock_offline_ico.png",
        checkedIcon: "custom-icons/lock_offline_selected_ico.png",
        checked: false
      },
      {
        key: "incompleteProperty",
        id: 6,
        label: "Incomplete Properties",
        icon: "prop_unselected.png",
        checkedIcon: "prop_selected.png",
        checked: false
      },
      {
        key: "canceledProperty",
        id: 7,
        label: "Subscription Canceled",
        icon: "prop-canceld-unselected.png",
        checkedIcon: "prop-canceld-selected.png",
        checked: false
      }
    ],
    expanded: 0,
    showShare: true,
    anchorEl: null,
    anchorElForShare: null,
    propertiesPage: 1,
    searchKey: "",
    propertyDeleteModelState: false,
    propertyId: null,
    propertyRemoveError: "",
    localStateLoader: false,
    shareAccess: false,
    selectedmenu: null,
    mobileMenuShow: false,
    mobileMenuShowIndex: null,
    isOldEditUrl: true,
    searchType: "property"
  };

  //handle expansion panel change
  handleExpansionChange = (panel, property) => (event, expanded) => {
    this.setState({
      mobileMenuShow: false,
      mobileMenuShowIndex: null
    });
    this._isAccessCodeMounted = true;
    this.props.setSelectedPropertyHandler(property);
    /* Removed because wanted to enable devices as default opened Tab */
    //this.props.resetAccessDataHandler();
    this.props.resetDevicesDataHandler();
    this.setState(
      {
        expanded: expanded ? panel : false
      },
      () => {
        if (expanded) {
          this.props.history.push("/dashboard/newDashboard/devices");
        } else {
          this.props.history.replace("/dashboard/newDashboard");
        }
      }
    );
  };

  // change pms switch
  pmsChange = (event, checked) => {
    event.stopPropagation();
  };

  // stop child to parent event propagation
  stopParentPropagation = event => {
    event.stopPropagation();
  };
  // on pms chaneg
  pmsChangeHandler = event => {
    if (event.target.value !== " ") {
      this.setState(
        {
          propertiesPage: 1,
          searchKey: event.target.value
        },

        () => {
          if (this.timer) clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.getPropertiesWithDeviceFilters();
          }, 600);
        }
      );
    }
  };

  // open PMS Filter Menu Box
  openPMSFilterMenuBox = event => {
    if (this.state.searchType == "property") {
      this.setState({ anchorEl: event.currentTarget });
    } else {
      event.preventDefault();
      return true;
    }
  };

  setShowShareItems = showShare => {
    this.setState({
      showShare: true
    });
  };

  // close PMS Filter Menu Box
  closePMSFilterMenuBox = event => {
    this.setState({ anchorEl: null });
  };
  //close pms filter box after adding filter
  closePMSFilterMenuBoxAfterAddingFilter = (id, checked) => {
    let updatedPropertiesWithDeviceFilters = this.state
      .propertiesWithDeviceFilters;
    let selectedFilterIndex = updatedPropertiesWithDeviceFilters.findIndex(
      item => item.id === id
    );
    updatedPropertiesWithDeviceFilters[selectedFilterIndex].checked = !checked;
    this.setState({
      propertiesPage: 1,
      propertiesWithDeviceFilters: updatedPropertiesWithDeviceFilters
      //anchorEl: null
    });
  };

  // get Filter Properties
  getFilterProperties = () => {
    this.getPropertiesWithDeviceFilters();
  };

  // show Share Panel
  showSharePanel = (event, selectedmenu) => {
    this.stopParentPropagation(event);
    this.setState({
      anchorElForShare: event.currentTarget,
      selectedmenu: selectedmenu
    });
  };
  // hide Share Panel
  hideSharePanel = event => {
    this.stopParentPropagation(event);
    this.setState({ anchorElForShare: null, selectedmenu: null });
  };

  // get properties list
  getPropertiesWithDeviceFilters = () => {
    let searchType = "property";
    let filters = this.getFilterList();
    if (this.state.searchType === "confirmationCode") {
      searchType = "confirmationCode";
      filters = [];
    }
    this.props.getPropertiesWithDeviceFiltersHandler(
      this.state.propertiesPage,
      this.state.searchKey,
      filters,
      searchType
    );
    if (this.state.searchType === "confirmationCode") {
      this.setState({ expanded: 0 }, () => {
        this.props.history.push("/dashboard/newDashboard/stays");
      });
    }
    if (this.state.searchType === "property") {
      this.props.history.push("/dashboard/newDashboard/devices");
    }
    // this.setState({
    //   expanded: false
    // });
  };

  getUserSetting = settingName => {
    getSettingInfo(settingName).then(res => {
      if (res.status) {
        if (
          res.data.settingInfo &&
          res.data.settingInfo.settingValue &&
          res.data.settingInfo.settingValue == 1
        ) {
          this.setState({
            isOldEditUrl: false
          });
        }
      }
    });
  };

  getNotificationUserSetting = settingName => {
    getSettingInfo(settingName).then(res => {
      if (res.status) {
        if (
          res.data.settingInfo &&
          res.data.settingInfo.settingValue &&
          res.data.settingInfo.settingValue == 1
        ) {
          this.setState({
            isOldNotificationUrl: false
          });
        }
      }
    });
  };

  // get filterList
  getFilterList = () => {
    let filterList = [];
    filterList = this.state.propertiesWithDeviceFilters.map(filter => {
      if (filter.checked) {
        return filter.key;
      }
    });
    return filterList.filter(notUndefined => notUndefined !== undefined);
  };

  // handle pagination
  handlePageClick = event => {
    this.setState(
      {
        propertiesPage: event.selected + 1,
        expanded: null
      },
      () => {
        this.getPropertiesWithDeviceFilters();
      }
    );
  };

  // delete property popup open/close
  deletePropertyModelShowHide = (event, isTrue, id = null) => {
    if (isTrue) {
      this.stopParentPropagation(event);
    }
    this.setState({
      expanded: false,
      propertiesPage: 1,
      propertyDeleteModelState: isTrue,
      propertyId: id,
      propertyRemoveError: ""
    });
  };

  // navigate to edit property
  navigateToEditProperty = (event, isTrue, property) => {
    event.stopPropagation();
    if (isTrue) {
      this.stopParentPropagation(event);
    }
    // as per naman discussion all user will land to new edit property url
    // if (this.state.isOldEditUrl) {
    //   window.open(
    //     `${gloablConfig.customePageUrl}/property/form/${property.uniquePropertyId}`,
    //     "_blank"
    //   );
    // } else 
    // {
      if (property.propertyStatus === "INCOMPLETE") {
        window.open(
          `${gloablConfig.customePageUrl}/addproperty/add/?isInComplete=true&isCanceled=false&propertyId=${property.uniquePropertyId}`,
          "_blank"
        );
        return;
      }

      if (property.propertyStatus === "SUBSCRIPTION_CANCELED") {
        window.open(
          `${gloablConfig.customePageUrl}/addproperty/add/?isInComplete=false&isCanceled=true&propertyId=${property.uniquePropertyId}`,
          "_blank"
        );
        return;
      }
      window.open(
        `${gloablConfig.customePageUrl}/editProperty/${property.uniquePropertyId}`,
        "_blank"
      );
    // }
  };

  // navigate to edit property
  navigateToNotification = (event, property) => {
    event.stopPropagation();
    if (this.state.isOldNotificationUrl) {
      window.open(
        `${gloablConfig.customePageUrl}/notification?property_id=${property.uniquePropertyId}`,
        "_blank"
      );
    } else {
      window.open(
        `${gloablConfig.customePageUrl}/notifications?propertyId=${property.uniquePropertyId}&propertyName=${property.name}`,
        "_blank"
      );
    }
    this.hideSharePanel(event);
  };

  // confiorm property delete
  confirmpropertyDeleteHandler = () => {
    this.setState({
      localStateLoader: true,
      propertyRemoveError: ""
    });
    confirmPropertyDelete(this.state.propertyId)
      .then(res => {
        if (res.status) {
          this.setState(
            {
              propertiesPage: 1,
              searchKey: "",
              propertyDeleteModelState: false,
              localStateLoader: false
            },
            () => {
              this.getPropertiesWithDeviceFilters();
            }
          );
        } else {
          this.setState({
            localStateLoader: false,
            propertyRemoveError: res.errorMessage
          });
        }
      })
      .catch(err => {
        this.setState({
          localStateLoader: false,
          propertyRemoveError: "Something went wrong!"
        });
      });
  };

  // try again to load properties
  tryAgainToLoadproperties = () => {
    this.setState(
      {
        propertiesPage: 1
      },
      () => {
        this.getPropertiesWithDeviceFilters();
      }
    );
  };

  componentDidMount() {
    this._isMounted = true;
    this.getPropertiesWithDeviceFilters();
    this.getUserSetting("EDIT_PAGE_ENABLED");
    this.getNotificationUserSetting("IS_NOTIFICATIONS_ENABLED");
  }

  componentWillMount() {
    axios.defaults.baseURL = gloablConfig.apiurl;
  }
  componentWillUnmount() {
    this._isMounted = false;
  }

  //cancel share access
  closeAccessShare = () => {
    this.setState({
      shareAccess: false
    });
  };

  // enable share access
  enableAccessShare = event => {
    this.stopParentPropagation(event);
    this.setState({
      shareAccess: true,
      mobileMenuShow: false,
      mobileMenuShowIndex: null
    });
  };

  // handleClickAwayMobileMenu
  handleClickAwayMobileMenu = () => {
    this.setState({
      mobileMenuShow: false,
      mobileMenuShowIndex: null
    });
  };

  showMobileMenu = (event, index) => {
    this.stopParentPropagation(event);
    this.setState({
      mobileMenuShow: !this.state.mobileMenuShow,
      mobileMenuShowIndex: index
    });
  };

  // hide menu handler
  hideMobileMenuHandler = () => {
    console.log("hideMobileMenuHandler", this.state.mobileMenuShow);
    if (this.state.mobileMenuShow) {
      this.handleClickAwayMobileMenu();
    }
  };

  propertyListBySearchType = event => {
    this.setState(
      {
        searchType: event.target.value
      },
      () => {
        if (this.isFilterSelected()) {
          this.resetPropertFilter();
          if (this.state.searchKey) {
            this.setState({ searchKey: "" }, () => {
              this.getPropertiesWithDeviceFilters();
            });
          } else {
            this.getPropertiesWithDeviceFilters();
          }
        }
      }
    );
  };

  // reset all selected filters
  resetPropertFilter = () => {
    let updatedPropertiesWithDeviceFilters = this.state
      .propertiesWithDeviceFilters;
    for (let inputIdentifier in updatedPropertiesWithDeviceFilters) {
      updatedPropertiesWithDeviceFilters[inputIdentifier].checked = false;
    }
    this.setState({
      propertiesPage: 1,
      propertiesWithDeviceFilters: updatedPropertiesWithDeviceFilters
    });
  };

  isFilterSelected = () => {
    if (this.state.searchKey !== "") {
      return true;
    } else {
      let checkedproperty = this.state.propertiesWithDeviceFilters.filter(
        filter => filter.checked
      );
      if (checkedproperty.length > 0) {
        return true;
      } else {
        return false;
      }
    }
  };
  render() {
    const {
      anchorEl,
      anchorElForShare,
      propertiesWithDeviceFilters,
      propertyDeleteModelState,
      propertyRemoveError,
      localStateLoader,
      shareAccess
    } = this.state;
    const { classes } = this.props;
    const { expanded, searchKey, selectedmenu } = this.state;
    const imgBaseUrl = gloablConfig.imageBaseURL;
    const imageRooturl = gloablConfig.imageBaseURL;
    if (
      this.showFirstItem &&
      this.props.propertiesWithDeviceFilter.length > 0
    ) {
      this.showFirstItem = false;
    }
    return (
      <Fragment>
        {shareAccess && (
          <DashboardShareKeyComponent.default
            store={this.props.data}
            baseUrl={gloablConfig.apiurl}
            imageBaseUrl = {gloablConfig.imageBaseURL}
            userType={"Buddy"}
            closeAccessShare={this.closeAccessShare}
          />
        )}

        {propertyDeleteModelState && (
          <RemoveProperty
            confirmpropertyDeleteHandler={this.confirmpropertyDeleteHandler}
            propertyRemoveError={propertyRemoveError}
            deletePropertyModelShowHide={this.deletePropertyModelShowHide}
            propertyDeleteModelState={propertyDeleteModelState}
            localStateLoader={localStateLoader}
          />
        )}

        {(this.props.localStateLoader || this.props.loader) && (
          <img
            className="loader-user-lib"
            src={imgBaseUrl + "/Loading.gif"}
            alt=""
          />
        )}
        <Grid
          container
          onClick={this.hideMobileMenuHandler}
          className="mobileTopSpace"
        >
          <Grid item={true} xs={12}>
            {this.props.propertiesWithDeviceFilter.length >= 0 && (
              <div className="vk-dashboard-category-filter">
                <div className="vk-dashboard-suggest-search">
                  <FormControl className="vk-inboxApp-search-type-icon">
                    <div className="lkdl">
                      <Select
                        value={this.state.searchType}
                        onChange={this.propertyListBySearchType}
                        title={
                          this.state.searchType == "property"
                            ? "Property"
                            : "Confirmation Code"
                        }
                        input={
                          <OutlinedInput
                            name="searchType"
                            id="searchType"
                            labelWidth={0}
                          />
                        }
                      >
                        {searchType.map(searchType => {
                          return (
                            <MenuItem
                              key={searchType.id}
                              classes={{ selected: classes.selected }}
                              value={searchType.value}
                              title={searchType.key}
                              className="dark-options-li"
                            >
                              {/* <Tooltip
                              title={searchType.key}
                              placement="right-start"
                              style={{ fontSize: 20 }}
                            > */}
                              <img
                                src={imageRooturl + "/inbox/" + searchType.icon}
                              />
                              {/* </Tooltip> */}
                            </MenuItem>
                          );
                        })}
                      </Select>
                    </div>
                  </FormControl>
                  <div className="vk-dashboard-search-box large">
                    <TextField
                      fullWidth
                      variant="outlined"
                      color="primary"
                      value={searchKey}
                      placeholder="List of Properties"
                      onChange={this.pmsChangeHandler}
                    />
                    <i className="material-icons">search</i>
                  </div>
                  <FormControl className="vk-dashboard-search-type-icon-right">
                    <Button
                      aria-owns={anchorEl ? "simple-menu" : undefined}
                      aria-haspopup="true"
                      onClick={this.openPMSFilterMenuBox}
                      disabled={this.state.searchType !== "property"}
                      title="Filters"
                    >
                      <img
                        alt=""
                        className="filterMiniIcon"
                        src={imgBaseUrl + "/dashboard/filter_do.png"}
                      />
                    </Button>
                    <Popper
                      open={Boolean(anchorEl)}
                      anchorEl={this.anchorEl}
                      transition
                      disablePortal
                      className="search-properties-menu"
                      id="simple-menu"
                    >
                      {({ TransitionProps, placement }) => (
                        <Grow
                          {...TransitionProps}
                          id="menu-list-grow"
                          style={{
                            transformOrigin:
                              placement === "bottom"
                                ? "right top"
                                : "right bottom"
                          }}
                        >
                          <Paper>
                            <ClickAwayListener
                              onClickAway={this.closePMSFilterMenuBox}
                            >
                              <MenuList>
                                <h4>Select one or more filters</h4>
                                {propertiesWithDeviceFilters.map(filterItem => {
                                  return (
                                    <MenuItem
                                      className="menuItemLable"
                                      onChange={() =>
                                        this.closePMSFilterMenuBoxAfterAddingFilter(
                                          filterItem.id,
                                          filterItem.checked
                                        )
                                      }
                                      key={filterItem.id}
                                    >
                                      <label htmlFor={filterItem.label}>
                                        <div className="image-icon">
                                          {!filterItem.checked && (
                                            <img
                                              className="custom-img-size-filter"
                                              alt=""
                                              src={
                                                imgBaseUrl +
                                                "/dashboard/" +
                                                filterItem.icon
                                              }
                                            />
                                          )}
                                          {filterItem.checked && (
                                            <img
                                              className="custom-img-size-filter"
                                              alt=""
                                              src={
                                                imgBaseUrl +
                                                "/dashboard/" +
                                                filterItem.checkedIcon
                                              }
                                            />
                                          )}
                                        </div>
                                        <h5>
                                          {filterItem.label.split(" ").length >
                                          0
                                            ? filterItem.label.split(" ")[0]
                                            : ""}
                                          <br />
                                          {filterItem.label.split(" ").length >
                                          1
                                            ? filterItem.label.split(" ")[1]
                                            : ""}
                                        </h5>
                                        <Checkbox
                                          id={filterItem.label}
                                          classes={{
                                            root: classes.root,
                                            checked: classes.checked
                                          }}
                                          checked={filterItem.checked}
                                          icon={<CircleUnchecked />}
                                          checkedIcon={<CircleCheckedFilled />}
                                        />
                                      </label>
                                    </MenuItem>
                                  );
                                })}
                              </MenuList>
                              <div
                                className={
                                  this.getFilterList().length === 0
                                    ? "vk-done-add"
                                    : "vk-done-remove"
                                }
                              >
                                <span onClick={this.getFilterProperties}>
                                  Done
                                </span>
                              </div>
                            </ClickAwayListener>
                          </Paper>
                        </Grow>
                      )}
                    </Popper>
                  </FormControl>
                </div>
              </div>
            )}
          </Grid>
        </Grid>
        <Grid className="" onClick={this.hideMobileMenuHandler}>
          <Grid className="vk-dashboard-wrapper">
            <Grid container className="vk-dashboard-container">
              {!this.props.loader &&
                !this.props.propertyLoadError &&
                this.props.propertiesWithDeviceFilter.length === 0 && (
                  <div className="no-properties">No Properties Available</div>
                )}
              {!this.props.loader &&
                this.props.propertyLoadError &&
                this.props.propertiesWithDeviceFilter.length === 0 && (
                  <div className="no-properties">
                    Something went wrong
                    <br />
                    <span
                      variant="outlined"
                      className="cursorPointer"
                      onClick={this.tryAgainToLoadproperties}
                    >
                      Try again!
                    </span>
                  </div>
                )}

              {this.props.propertiesWithDeviceFilter.length > 0 &&
                this.props.propertiesWithDeviceFilter.map((property, index) => {
                  return (
                    <Grid key={property.uniquePropertyId} item={true} xs={12}>
                      <div className="vk-dashboard-panel-container">
                        <ExpansionPanel
                          className="vk-dashboard-panel expansion-panel"
                          expanded={expanded === index}
                          onChange={this.handleExpansionChange(index, property)}
                        >
                          <ExpansionPanelSummary
                            className="expansion-panel-summary"
                            expandIcon={
                              <i
                                className="expand_custom_icon"
                                title="Property Details"
                              >
                                <ExpandMoreIcon className="expanded-icon" />
                              </i>
                            }
                          >
                            <Grid
                              container
                              className="vk-dashboard-panel-title"
                            >
                              <Grid item={true} xs={4}>
                                {/* <PropertyStatus
                                      propertyId={property.uniquePropertyId}
                                    /> */}
                                <div className="show-on-mobile">
                                  {/* <PropertyStatus /> */}
                                  <div
                                    className="vk-dashboard-notification-panel-mobile"
                                    aria-haspopup="true"
                                  >
                                    <span
                                      onClick={event =>
                                        this.enableAccessShare(event, index)
                                      }
                                    ></span>
                                    <i
                                      className="material-icons"
                                      onClick={event =>
                                        this.showMobileMenu(event, index)
                                      }
                                    >
                                      more_horiz
                                    </i>

                                    <React.Fragment>
                                      {this.state.mobileMenuShowIndex ===
                                        index &&
                                        this.state.mobileMenuShow && (
                                          <ul className="mobile-menu">
                                            <li
                                              onClick={event =>
                                                this.enableAccessShare(
                                                  event,
                                                  index
                                                )
                                              }
                                            >
                                              Share A VirtualKEY{" "}
                                              <img
                                                alt=""
                                                title="Share a key"
                                                src={
                                                  imgBaseUrl +
                                                  "/dashboard/share_virtual_key.png"
                                                }
                                              />
                                            </li>
                                            <li
                                              onClick={$event =>
                                                this.navigateToNotification(
                                                  $event,
                                                  property
                                                )
                                              }
                                            >
                                              Notifications{" "}
                                              <img
                                                alt=""
                                                title="Notifications"
                                                src={
                                                  imgBaseUrl +
                                                  "/dashboard/notifications_.png"
                                                }
                                              />
                                            </li>
                                          </ul>
                                        )}
                                    </React.Fragment>
                                  </div>
                                </div>
                                {/* <div className="vk-dashboard-panel-images">
                                  <span>
                                    <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/unlocked_selected.png"
                                      }
                                    />
                                  </span>
                                  <span>
                                    <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/lights_on_selected.png"
                                      }
                                    />
                                  </span>
                                  <span>
                                    <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/leak_selected.png"
                                      }
                                    />
                                  </span>
                                  <span>
                                    <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/small-green-lock.png"
                                      }
                                    />
                                  </span>
                                  <span>
                                    <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/lights_on_selected.png"
                                      }
                                    />
                                  </span>
                                </div> */}
                              </Grid>
                              <Grid item={true} xs={4}>
                                <div className="vk-dashboard-check-in-out-header">
                                  <span>
                                    <b className="font-500">
                                      {property.name ? property.name : ""} -
                                    </b>{" "}
                                    &nbsp; &nbsp;
                                    {property.address1 ? property.address1 : ""}
                                  </span>
                                  {property.address2 && (
                                    <span>
                                      <b className="font-500">
                                        {property.address2}
                                      </b>
                                    </span>
                                  )}
                                  <div>
                                    {property.checkInTime && (
                                      <span>
                                        Check In:{" "}
                                        <b className="font-500">
                                          {" "}
                                          &nbsp; {property.checkInTime}
                                        </b>
                                      </span>
                                    )}
                                    {property.checkInTime && (
                                      <span>
                                        Check Out:{" "}
                                        <b className="font-500">
                                          {" "}
                                          &nbsp;{property.checkOutTime}
                                        </b>
                                      </span>
                                    )}
                                  </div>
                                </div>
                              </Grid>
                              <Grid
                                item={true}
                                xs={4}
                                className="text-right edit-delete-section"
                              >
                                {/* <span className="custom-toggle-switch">
                                  <Switch
                                    onClick={event =>
                                      this.stopParentPropagation(event)
                                    }
                                    onChange={(event, checked) =>
                                      this.pmsChange(event, checked)
                                    }
                                    classes={{
                                      switchBase: classes.iOSSwitchBase,
                                      bar: classes.iOSBar,
                                      icon: classes.iOSIcon,
                                      iconChecked: classes.iOSIconChecked,
                                      checked: classes.iOSChecked
                                    }}
                                    disableRipple
                                    checked={this.state.checkedB}
                                    value="checkedB"
                                  />
                                </span> */}
                                <span className="vk-dashboard-list-edit">
                                <img
                                  className="edit-green"
                                  src={imageRooturl + "/editDarkGreen.png"}
                                  onClick={$event =>
                                    this.navigateToEditProperty(
                                      $event,
                                      true,
                                      property
                                    )
                                  }
                                />
                                </span>

                                {/* <span className="vk-dashboard-list-close">
                                  <i
                                    className="material-icons"
                                    title="Delete Property"
                                    onClick={$event =>
                                      this.deletePropertyModelShowHide(
                                        $event,
                                        true,
                                        property.uniquePropertyId
                                      )
                                    }
                                  >
                                    close
                                  </i>
                                </span> */}
                              </Grid>
                            </Grid>
                          </ExpansionPanelSummary>
                          <ExpansionPanelDetails className="expansion-panel-details display-block vk-dashboard-groups">
                            <Grid container className="pad-lr-25-resonsive-0">
                              <Grid item={true} xs={12} sm={8}>
                                <div className="vk-dashboard-main-tabs">
                                  <ul>
                                    <li
                                      onClick={() =>
                                        this.setShowShareItems(false)
                                      }
                                    >
                                      <NavLink
                                        to="/dashboard/newDashboard/devices"
                                        activeClassName="selected"
                                      >
                                        Devices
                                      </NavLink>
                                    </li>
                                    <li
                                      onClick={() =>
                                        this.setShowShareItems(true)
                                      }
                                    >
                                      <NavLink
                                        to="/dashboard/newDashboard/stays"
                                        activeClassName="selected"
                                      >
                                        Stays
                                      </NavLink>
                                    </li>
                                    <li
                                      onClick={() =>
                                        this.setShowShareItems(true)
                                      }
                                    >
                                      <NavLink
                                        to="/dashboard/newDashboard/access"
                                        activeClassName="selected"
                                      >
                                        Access
                                      </NavLink>
                                    </li>
                                    {/* <li
                                      onClick={() =>
                                        this.setShowShareItems(true)
                                      }
                                    >
                                      <NavLink
                                        to="/dashboard/newDashboard/groups"
                                        activeClassName="selected"
                                      >
                                        Groups
                                      </NavLink>
                                    </li> */}
                                  </ul>
                                </div>
                              </Grid>
                              {this.state.showShare && (
                                <Grid
                                  item={true}
                                  xs={4}
                                  // className="hide-on-mobile"
                                >
                                  <div className="vk-dashboard-notification-panel hide-on-mobile">
                                    <img
                                      onClick={event =>
                                        this.enableAccessShare(event, index)
                                      }
                                      alt=""
                                      title="Share a key"
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/share_virtual_key.png"
                                      }
                                    />
                                    <img
                                      alt=""
                                      title="Notifications"
                                      onClick={$event =>
                                        this.navigateToNotification(
                                          $event,
                                          property
                                        )
                                      }
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/notifications_.png"
                                      }
                                    />
                                    {/* <img
                                      alt=""
                                      src={
                                        imgBaseUrl +
                                        "/dashboard/house_manual_.png"
                                      }
                                    /> */}
                                  </div>
                                </Grid>
                              )}
                            </Grid>

                            {/* new plugins code  */}
                            {expanded === index &&
                              this.props.propertyData !== null && (
                                <SwitchContainer>
                                  <Route
                                    exact
                                    path="/dashboard/newDashboard/devices"
                                    render={props => (
                                      <DashboardDevicesComponent.default
                                        baseUrl={gloablConfig.apiurl}
                                        imageBaseURL = {gloablConfig.imageBaseURL}
                                        store={this.props.data}
                                      />
                                    )}
                                  />
                                  <Route
                                    exact
                                    path="/dashboard/newDashboard/stays"
                                    render={props => (
                                      <DashboardStaysComponent.default
                                        baseUrl={gloablConfig.apiurl} 
                                        imageBaseUrl = {gloablConfig.imageBaseURL}
                                        searchData={
                                          this.state.searchType ==
                                          "confirmationCode"
                                            ? this.state.searchKey
                                            : ""
                                        }
                                        store={this.props.data}
                                        closeAccessShare={this.closeAccessShare}
                                        paropertStaysTab={
                                          property.propertyStaysTab
                                            ? property.propertyStaysTab
                                            : "current"
                                        }
                                        searchResultPage={
                                          property.searchResultPage
                                            ? property.searchResultPage
                                            : "1"
                                        }
                                      />
                                    )}
                                  />
                                  <Route
                                    exact
                                    path="/dashboard/newDashboard/access"
                                    render={props => (
                                      <DashboardAccessComponent.default
                                        baseUrl={gloablConfig.apiurl} 
                                        imageBaseUrl = {gloablConfig.imageBaseURL}
                                        store={this.props.data}
                                        closeAccessShare={this.closeAccessShare}
                                      />
                                    )}
                                  />
                                  <Route
                                    exact
                                    path="/dashboard/newDashboard/groups"
                                    render={props => (
                                      <DashboardGroupsComponent.default
                                        baseUrl={gloablConfig.apiurl} 
                                        imageBaseUrl = {gloablConfig.imageBaseURL}
                                        store={this.props.data}
                                      />
                                    )}
                                  />
                                  <Redirect
                                    exact
                                    from="/dashboard/newDashboard"
                                    to="/dashboard/newDashboard/devices"
                                  />
                                </SwitchContainer>
                              )}
                          </ExpansionPanelDetails>
                        </ExpansionPanel>
                      </div>
                    </Grid>
                  );
                })}
              {this.props.propertiesWithDeviceFilter.length > 0 && (
                <Divider></Divider>
              )}
              {!this.props.loader &&
                this.props.propertiesWithDeviceFilter.length > 0 &&
                this.props.propertiesWithDeviceFilterPaging.totalPages &&
                this.props.propertiesWithDeviceFilterPaging.totalPages > 1 && (
                  <PagginationComponent
                    perPage={this.props.propertiesWithDeviceFilterPaging.page}
                    pageCount={
                      this.props.propertiesWithDeviceFilterPaging.totalPages
                    }
                    handlePageClick={this.handlePageClick}
                  />
                )}
              {this.props.propertiesWithDeviceFilter.length > 0 && (
                <Divider></Divider>
              )}
            </Grid>
          </Grid>
        </Grid>
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  loader: state.DashboardPropertiesReducer.loader
    ? state.DashboardPropertiesReducer.loader
    : false,
  propertiesWithDeviceFilter: state.DashboardPropertiesReducer
    .propertiesWithDeviceFilter
    ? state.DashboardPropertiesReducer.propertiesWithDeviceFilter
    : [],
  propertiesWithDeviceFilterPaging: state.DashboardPropertiesReducer
    .propertiesWithDeviceFilterPaging
    ? state.DashboardPropertiesReducer.propertiesWithDeviceFilterPaging
    : {},
  propertyData: state.DashboardPropertiesReducer.selectedItem
    ? state.DashboardPropertiesReducer.selectedItem
    : null,
  propertyLoadError: state.DashboardPropertiesReducer.propertyError
});

const mapToDispatchProps = dispatch => ({
  getPropertiesWithDeviceFiltersHandler: (
    page,
    searchKey,
    filters,
    searchType
  ) => {
    dispatch(
      getPropertiesWithDeviceFilters(page, searchKey, filters, searchType)
    );
  },
  setSelectedPropertyHandler: selectedItem => {
    dispatch(setSelectedProperty(selectedItem));
  },
  resetAccessDataHandler: () => {
    dispatch(resetAccessData());
  },
  resetDevicesDataHandler: () => {
    dispatch(resetDevicesData());
  }
});

export default withRouter(
  connect(mapStateToProps, mapToDispatchProps)(withStyles(styles)(Dashboard))
);