'use client';
import { AppDispatch, RootState } from '@/redux/slices';
import { commonActions } from '@/redux/slices/Common/commonSlice';
import { getViewBooking } from '@/redux/thunks/Booking/booking.thunk';
import { Toast } from '@/src/components/Toast';
import { BookingConfirmedData } from '@/src/types/StaticContent/booking-confirmed.type';
import Routes from '@/src/utils/RouteConstants';
import { BookingConfirmed } from 'blankbase-packages';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const BookingConfirm = ({ slug, bookingId, encryptedValue, userType, dashboardUrl, myBookingUrl }: { BookingConfirmedData: BookingConfirmedData, slug: string, bookingId: string, encryptedValue: string, userType: string, dashboardUrl: string, myBookingUrl: string }) => {
  const router = useRouter()
  const dispatch = useDispatch<AppDispatch>();

  const { viewBookingData } = useSelector((state: RootState) => state.booking);

  useEffect(() => {
    if (bookingId) {
      dispatch(getViewBooking({ bookingId: bookingId }, (res) => {
        if (!res?.meta?.status) {
          Toast('error', res?.meta?.message);
          router.push(`${Routes.FIND_A_HOME_INFO(slug)}`);
        }
      }));
    }
    dispatch(commonActions.isBookingFlow(false));
  }, [bookingId])


  /**
   * Navigates the user to a specific URL based on the button clicked.
   * 
   * @param item - A string representing the button clicked. If 'mybooking',
   * the user is redirected to the "My Booking" page. Otherwise, the user is
   * redirected to the "Dashboard" page.
   */
  const onBtnClick = (item: string) => {
    if (item === 'mybooking') {
      router.push(`${Routes.HOST_ADD_LISTING}?aI=${encryptedValue}&uT=${userType}&rD=${myBookingUrl}`)
    } else {
      router.push(`${Routes.HOST_ADD_LISTING}?aI=${encryptedValue}&uT=${userType}&rD=${dashboardUrl}`)
    }
  }

  return (
    <main className={`bg-bgColor main-mt pt-[30px] sm:pt-[40px] pb-[30px] sm:pb-[40px]`}>
      <section>
        <div className={`container`}>
          <BookingConfirmed
            viewBookingData={viewBookingData?.data}
            onBtnClick={onBtnClick}
          />
        </div>
      </section>
    </main>
  )
}

export default BookingConfirm