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

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

// Import actions here
import bookingActions from 'store/booking/actions';
import actionsBuilder from 'store/appActions';

import { NavLink, withRouter } from 'react-router-dom';
import { pushRoute } from 'store/utils/routes';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import moment from 'moment';
import BookingCard from 'components/listItems/BookingCard';
import Pagination from 'components/items/Pagination';
import qs from 'query-string';
import styleIdentifiers from './detailWorkspaceBookingListing.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailWorkspaceBookingListingProps = StateProps & DispatchProps & OwnProps;

const LIMIT = 50;

const DetailWorkspaceBookingListing = (props: DetailWorkspaceBookingListingProps) => {
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions

  const {
    match: { params },
    history,
    location: { search },
  } = props;
  // mapStateToProps
  const workspace = useSelector(
    (state: StoreState) => state.workspace.detail && state.workspace.detail.data,
  );

  const bookings = useSelector((state: StoreState) => state.booking.list?.data);

  // Allow to dispatch actions
  const dispatch = useDispatch();

  const { workspaceDetail, bookingList } = actionsBuilder(dispatch, ['detail', 'list']);

  const searchParams = qs.parse(search);

  const loadBookings = () => {
    bookingList({
      page: searchParams.page,
      limit: LIMIT,
      data: {
        status: ['validated'],
        ressourceId: params.id,
      },
    });
  };
  useEffect(() => {
    loadBookings();
    if (!workspace || workspace._id !== params.id) {
      workspaceDetail({
        id: params.id,
      });
    }
  }, [search]);

  console.log('the bookings', bookings);

  if (!workspace) return false;

  return (
    <div className={styles('detail-workspace-booking-listing')}>
      <div className={styles('container')}>
        <div className={styles('top')}>
          <div className={styles('left')}>
            <div className={styles('nav')}>
              <NavLink to={pushRoute('mySpaces', lg)} className={styles('link')}>
                <TextItem path="pages.mySpaces.title" />
              </NavLink>
              <NavLink
                to={pushRoute('detailWorkspace.id', lg, {
                  id: workspace._id,
                })}
                className={styles('link')}
              >
                <TextItem path={workspace.title} />
              </NavLink>
              <TextItem path="pages.myBookings.management" className={styles('strong')} />
            </div>
            <h1>
              <TextItem path={workspace.title} />
            </h1>
          </div>
        </div>
        <div className={styles('cards-container')}>
          {bookings?.map((item, index) => {
            return <BookingCard type="pro" booking={item} key={index} history={history} />;
          })}
          <Pagination count={bookings?.count} limit={LIMIT} current={searchParams.page} />
          {!bookings?.length && (
            <div className={styles('no-result')}>
              <TextItem path="pages.myBookings.noResults" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default DetailWorkspaceBookingListing;
