import React, { useContext } from 'react';
import { getTranslations } from '../../../shared/utils/localization-util';
import { SearchResultsRootState } from '../../store/search-results-store';
import { useDispatch, useSelector } from 'react-redux';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import BookingPanel from '../../../shared/booking/BookingPanel';
import StepIndicators from '../../../shared/booking/StepIndicators';
import WLSidebar from './wl-sidebar';
import { SearchSeed } from '../../types';

interface BookPackagingEntryProps {
  activeSearchSeed: SearchSeed | null;
}

const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed }) => {
  const context = useContext(SearchResultsConfigurationContext);
  if (!context) {
    return null;
  }
  const translations = getTranslations(context.languageCode ?? 'en-GB');
  const { currentStep } = useSelector((state: SearchResultsRootState) => state.searchResults);
  const dispatch = useDispatch();

  const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];

  return (
    <div className="booking">
      <div className="booking__content">
        <BookingPanel
          currentStep={currentStep}
          stepLabels={stepLabels}
          StepIndicatorsComponent={StepIndicators}
          renderTitle={(step) => (
            <>
              {step + 1}.&nbsp;{stepLabels[step]}
            </>
          )}>
          {/* Panel body content goes here */}
          <div></div>
        </BookingPanel>
        <div className="backdrop" id="backdrop"></div>
        <WLSidebar activeSearchSeed={activeSearchSeed} />
      </div>
    </div>
  );
};

export default BookPackagingEntry;