import { markSeen } from './api';

const setMaxPrice = ({ type, action }, component) => {
  const maxPrice = parseFloat(action.maxPrice);
  component.setState({
    page: 0,
    filters: {
      ...component.state.filters,
      maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
      priceDirty: true
    }
  });
};

const setMinPrice = ({ type, action }, component) => {
  const minPrice = parseFloat(action.minPrice);
  component.setState({
    page: 0,
    filters: {
      ...component.state.filters,
      minPrice: isNaN(minPrice) ? undefined : minPrice,
      priceDirty: true
    }
  });
};

const setMinSize = ({ type, action }, component) => {
  const minSize = parseFloat(action.minSize);
  component.setState({
    page: 0,
    filters: {
      ...component.state.filters,
      minSize: isNaN(minSize) ? undefined : minSize,
      sizeDirty: true
    }
  });
};

const setMaxSize = ({ type, action }, component) => {
  const maxSize = parseFloat(action.maxSize);
  component.setState({
    page: 0,
    filters: {
      ...component.state.filters,
      maxSize: isNaN(maxSize) ? undefined : maxSize,
      sizeDirty: true
    }
  });
};

const viewListingDetails = ({ type, action }, component) => {
  const scrollElem = document.querySelector('.right-content');
  component.savedScrollTop = scrollElem.scrollTop;

  component.setState({
    listingDetails: true,
    listingId: action.id,
    descriptionExpanded: false,
    imageIndex: 0
  }, () => {
    markSeen(action.id);
    const m = component.findMarker(action.id);
    if (m) {
      m.marker.setIcon(component.selectedMarkerIcon());
    }

    scrollElem.scrollTop = 0
  });
};

const listingsLoaded = ({ type, action }, component) => {
  console.log('listings_loaded', action.more);
  const currentListings = new Map();

  for (const listing of action.listings) {
    currentListings.set(listing._id, listing);
  }

  component.setState({
    listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings,
    loadingMore: false,
    totalCount: action.totalCount
  }, () => {
    component.markers = action.newMarkers;
    console.log('ALL LOADED', component.state.listings);
  });
};

const expandDescription = ({ type, action }, component) => {
  component.setState({
    descriptionExpanded: true
  });
};

const prevImage = ({ type, action }, component) => {
  const index = component.state.imageIndex;
  if (index > 0) {
    component.setState({
      imageIndex: index - 1
    });
  }
};

const nextImage = ({ type, action }, component) => {
  const index = component.state.imageIndex;
  component.setState({
    imageIndex: index + 1
  });
};

const viewImage = ({ type, action }, component) => {
  component.setState({
    imageIndex: action.index
  });
};

const searchPlaceChanged = ({ type, action }, component) => {
  component.setState({
    listingDetails: false,
    page: 0
  });
};

const setRooms = ({ type, action }, component) => {
  const prevRooms = component.state.filters.rooms || {};

  component.setState(
    {
      page: 0,
      filters: {
        ...component.state.filters,
        rooms: {
          ...prevRooms,
          [action.rooms]: !prevRooms[action.rooms]
        }
      }
    },
    () => {
      component.refreshListings();
    }
  );
};

const updateSearch = ({ type, action }, component) => {
  component.setState(
    {
      filters: {
        ...component.state.filters,
        sizeDirty: false,
        priceDirty: false
      }
    },
    () => {
      component.refreshListings();
    }
  );
};

const setCategory = ({type, action}, component) => {

  const prevCategory = component.state.filters.category || {};

  component.setState(
    {
      page: 0,
      filters: {
        ...component.state.filters,
        category: {
          ...prevCategory,
          [action.category]: !prevCategory[action.category]
        }
      }
    },
    () => {
      component.refreshListings();
    }
  );
};

const onListingMouseOver = ({type, action}, component) => {
  const marker = component.findMarker(action.id);
  if (marker) {
    const seen = component.isSeen(action.id);
    if (seen) {
      marker.marker.setIcon(component.visitedHoveredMarkerIcon());
    } else {
      marker.marker.setIcon(component.hoveredMarkerIcon());
    }

    marker.marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout(() => {
      marker.marker.setAnimation(null);

      if (seen) {
        marker.marker.setIcon(component.visitedMarkerIcon());
      } else {
        marker.marker.setIcon(component.defaultMarkerIcon());
      }
    } , 710);
  }

};

const backToResults = ({type, action}, component) => {
  const prevSelected = component.findMarker(component.state.listingId);
  component.setState({
    listingId: undefined,
    listingDetails: false
  }, () => {

    if (prevSelected) {
      prevSelected.marker.setIcon(component.visitedMarkerIcon());
    }

    const scrollElem = document.querySelector('.right-content');
    scrollElem.scrollTop = component.savedScrollTop;
  });
}

const loadMoreListings = ({type, action}, component) => {
  console.log('loading more');

  const currentPage = component.state.page;
  if (currentPage * 20 < component.state.totalCount) {
    component.setState({
      loadingMore: true,
      page: currentPage + 1
    }, () => {
      component.refreshListings(true);
    });
  }
}

const mapIdle = ({type, action}, component) => {
  component.setState({
    page: 0
  }, () => {
    const scrollElem = document.querySelector('.right-content');
    scrollElem.scrollTop = 0;
    component.refreshListings();
  })
}

const handlers = {
  SET_MIN_PRICE: setMinPrice,
  SET_MAX_PRICE: setMaxPrice,
  SET_MIN_SIZE: setMinSize,
  SET_MAX_SIZE: setMaxSize,
  LISTINGS_LOADED: listingsLoaded,
  EXPAND_DESCRIPTION: expandDescription,
  PREV_IMAGE: prevImage,
  NEXT_IMAGE: nextImage,
  VIEW_IMAGE: viewImage,
  SEARCH_PLACE_CHANGED: searchPlaceChanged,
  SET_ROOMS: setRooms,
  VIEW_LISTING_DETAILS: viewListingDetails,
  UPDATE_SEARCH: updateSearch,
  SET_CATEGORY: setCategory,
  ON_LISTING_MOUSE_OVER: onListingMouseOver,
  BACK_TO_RESULTS: backToResults,
  LOAD_MORE_LISTINGS: loadMoreListings,
  MAP_IDLE: mapIdle
};

export const handleMessage = ({ type, action }, component) => {
  if (!handlers[type]) {
    throw new `Unhandled message: ${type}`();
  }

  return handlers[type]({ type, action }, component);
};