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

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink } from 'react-router-dom';
import { push } from 'connected-react-router';
import { pushRoute } from 'store/utils/routes';
import returnDefaultCenter from 'store/utils/projectHelpers';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import WorkspaceCard from 'components/listItems/WorkspaceCard';
import GoogleMapItem from 'components/pageItems/GoogleMapItem';

import actionsBuilder from 'store/appActions';
import MapStructure from 'components/structure/MapStructure';
import Pagination from 'components/items/Pagination';
import qs from 'query-string';
import ProjectModal from 'components/items/ProjectModal';
import styleIdentifiers from './mySpaces.scss';

// assets
import itemOne from './assets/item-1.jpg';
import more from './assets/more.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type MySpacesProps = StateProps & DispatchProps & OwnProps;
const LIMIT = 50;

const MySpaces = (props: MySpacesProps) => {
  const {
    history,
    location: { search },
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector((state: StoreState) => state.account.profile?.data);

  const myWorkspaces = useSelector((state: StoreState) => state.workspace.mine);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const actions = actionsBuilder(dispatch, ['mine', 'dialog.show']);

  const addWorkspace = () => {
    if (profile?.payoutInfo?.stripeInfo?.detailsSubmitted) {
      history.push(pushRoute('addWorkspace', lg));
      return;
    }

    actions.appDialogShow({
      id: 'custom',
      children: (
        <ProjectModal
          title="pages.mySpaces.noPayoutTitle"
          message="pages.mySpaces.noPayoutMessage"
          actionRight={() => {
            history.push(pushRoute('payout', lg));
          }}
        />
      ),
    });
  };

  const searchParams = qs.parse(search);

  useEffect(() => {
    actions.workspaceMine({
      page: searchParams.page,
      limit: LIMIT,
    });
    window.scrollTo(0, 0);
  }, [search]);

  const list = myWorkspaces && myWorkspaces.data;

  return (
    <>
      {myWorkspaces && myWorkspaces.loaded && (
        <MapStructure
          list={myWorkspaces}
          className={styles('my-spaces')}
          center={returnDefaultCenter(list)}
        >
          <div className={styles('add')} onClick={addWorkspace}>
            <img src={more} alt="" className={styles('more')} />
          </div>
          <h1 className={styles('title')}>
            <TextItem path="pages.mySpaces.title" />
          </h1>
          <div className={styles('list-wrapper')}>
            {list &&
              list.map((item, index) => {
                return <WorkspaceCard key={index} view="pro" item={item} />;
              })}
            <Pagination count={myWorkspaces?.count} limit={LIMIT} current={searchParams.page} />

            {(!list || !list.length) && myWorkspaces && myWorkspaces.loaded && (
              <div className={styles('no-results')}>
                <TextItem path="pages.mySpaces.noResults" />
              </div>
            )}
          </div>
        </MapStructure>
      )}
    </>
  );
};

export default MySpaces;
