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}>
      <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 && (
            <>
              {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>
  )
}

export default TravelerRooms;