text: import React from 'react';
  import TripCard from '../../components/TripCard/TripCard';
  import { changeTripStatus, getTripsFromdb, resetTrips, selectTrip, unAssignTrip } from '../../redux/actions/trips';
  import { useDispatch, useSelector } from 'react-redux';
  import { Row, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
  import { toast } from 'react-toastify';
  const InProgressTrips = () => {
  	const dispatch = useDispatch();
  	const [page, setPage] = React.useState(0);
  	const trips = useSelector((state) => state.trip.trips);
  	React.useEffect(() => {
  		dispatch(getTripsFromdb("CANCELLED",page));
  		return () => {
  			dispatch(resetTrips());
  		};
  	}, []);
    const unassignTripHandler = async (index,status=null) => {
      console.log(trips.content[index]);
      const response = await changeTripStatus(trips.content[index].id,status);
      if (response.status === 200) {
        dispatch(getTripsFromdb("CANCELLED", page));
        toast.success('Trip Status Changed', {
          position: toast.POSITION.TOP_RIGHT
      })
      }
  
  	}
  	const pageHandler = (number = null,dir=null)=>{
          if (dir==='next') {
              setPage(prev=> prev + 1);
          }
          else if (dir === 'prev') {
              setPage(prev => {
  				if (!Math.sign(prev)) return prev;
                  else return prev - 1;
  			})
  		}
          else if(number>=0) setPage(number)
  	}
  	return (
  		<div className="container-fluid">
  			<h3>Cancelled Trips</h3>
  			{trips?.content?.map((item, k) => <TripCard type="CANCELLED" key={k} data={item} index={k} assignHandler={unassignTripHandler} />)}
  			{  trips.content?.length > 0 &&	<Row className="d-flex justify-content-center">
                      <Pagination >
                          <PaginationItem onClick={()=>pageHandler(null,'prev')} disabled={trips.pageNumber===0?true:false}>
                              <PaginationLink previous  />
                          </PaginationItem>
                          {
                              trips.content?.length > 0 && [...Array(trips.totalPages).keys()].map((k, i) => (
                                  <PaginationItem key={i} onClick={()=>pageHandler(k)} active={trips.pageNumber===k}>
                                      <PaginationLink >
                                          { k+1}
                                  </PaginationLink>
                              </PaginationItem>
                              ))
                          }
                          <PaginationItem onClick={()=>pageHandler(null,'next')} disabled={trips.totalPages-1===trips.pageNumber?true:false}>
                              <PaginationLink next  />
                          </PaginationItem>
                      </Pagination>
                  </Row>}
  		</div>
  	);
  };
  export default InProgressTrips;
  