import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch, useRef } from 'react-redux';
import { StoreState } from 'store/rootReducer';

import { animateScroll as scroll, scroller } from 'react-scroll';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import GoogleMapItem from 'components/pageItems/GoogleMapItem';
import ReactPaginate from 'react-paginate';
import { withRouter } from 'react-router-dom';
import qs from 'query-string';
import Pagination from 'components/items/Pagination';
import workspace from 'store/workspace';
import styleIdentifiers from './mapStructure.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type MapStructureProps = StateProps & DispatchProps & OwnProps;

const MapStructure = (props: MapStructureProps) => {
  const {
    relative,
    count,
    limit,
    currentPage,
    className,
    list,
    children,
    onMarkerClick,
    center,
  } = props;
  const [options, setOptions] = useState();

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();
  const highlight = data => dispatch(workspace.actions.highlight.action(data));
  const onClick = item => {
    if (onMarkerClick) onMarkerClick(item);

    highlight(item._id);
    scroller.scrollTo(item._id, {
      duration: 300,
      smooth: true,
      offset: -90,
      // containerId: 'window',
    });
  };

  useEffect(() => {
    if (center) {
      setOptions({
        center: {
          lng: center[0],
          lat: center[1],
        },
      });
    } else {
      setOptions({});
    }
  }, [center]);

  return (
    <div className={styles('map-structure', relative && 'relative', className)}>
      <div className={styles('items-wrapper')} id="scroller">
        {children}
        <Pagination current={currentPage} count={count} limit={limit} />
      </div>
      <div className={styles('map-wrapper')}>
        <GoogleMapItem
          onMarkerClick={onClick}
          options={options || {}}
          markers={(list && list.data) || []}
        />
      </div>
    </div>
  );
};

export default withRouter(MapStructure);
