import React, { useState } from "react";
import { SelectableRoom } from "../../types";
import { useSelector } from "react-redux";
import { selectTranslations } from "../booking/selectors";
import RoomOption from "./room";
import { isEmpty } from "lodash";

interface TravelerRoomsProps {
  index: number;
  room: SelectableRoom;
  onRoomChange: (
    index: number,
    accommodationCode: string,
    regimeCode: string | null
  ) => void;
}

const TravelerRooms: React.FC<TravelerRoomsProps> = ({
  index,
  room,
  onRoomChange,
}) => {
  const translations = useSelector(selectTranslations);
  const [showAlternatives, setShowAlternatives] = useState<boolean>(false);

  const selectedAccommodationCode = room.selected.code;

  return (
    <div key={room.index} className="form__room__container">
      <div className="form__room__header">
        <h5>
          {translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP} {room.index + 1}
        </h5>
      </div>

      <RoomOption
        room={room.selected}
        hasAlternatives={!isEmpty(room.alternatives)}
        onRegimeChange={(regimeCode) =>
          onRoomChange(index, selectedAccommodationCode, regimeCode)
        }
        onToggleAlternatives={() => setShowAlternatives(!showAlternatives)}
      />

      {!isEmpty(room.alternatives) && showAlternatives && (
        <div className="form__room__alternatives">
          <div className="form__room__alternatives__header">
            {translations.ROOM_OPTIONS_FORM.ALTERNATIVES_TRAVELER_GROUP}{" "}
            {room.index + 1}
          </div>

          {showAlternatives && (
            <>
              <div className="form__room__alternatives__content">
                {room.alternatives.map((alternative, alternativeIndex) => (
                  <RoomOption
                    key={alternativeIndex}
                    room={alternative}
                    selectedRoomPrice={room.selected.price}
                    onAcommodationChange={(accommodationCode, regimeCode) => {
                      setShowAlternatives(false);
                      onRoomChange(index, accommodationCode, regimeCode);
                    }}
                  />
                ))}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default TravelerRooms;