import { range } from "lodash";
import React, { useContext, useState } from "react";
import { buildClassName } from "../../shared/utils/class-util";
import { getTranslations } from "../../shared/utils/localization-util";
import SettingsContext from "../settings-context";
import { ProductRoom } from "../types";
import AgeSelect from "./age-select";
import AmountInput from "./amount-input";
import Icon from "./icon";

interface RoomsProps {
  rooms: ProductRoom[];
  isDisabled: boolean,
  setIsDisabled: (isOpen: boolean) => void;
  onChange: (rooms: ProductRoom[]) => void;
}

const Rooms: React.FC<RoomsProps> = ({
  rooms,
  isDisabled,
  setIsDisabled,
  onChange,
}) => {

  const [isTouched, setIsTouched] = useState<boolean>(false);
  const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);

  const {
    language,
  } = useContext(SettingsContext);
  const translations = getTranslations(language);

  const handleCloseClick = () => {
    setIsDisabled(true);
    if (isTouched) onChange(currentRooms);
  }

  return (
    <div className="booking-product__rooms">
      <div className="booking-product__rooms-title">
        <Icon name="ui-user" width={25} height={25} />{translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
      </div>
      <div className="booking-product__rooms__container">
        <div className="booking-product__rooms__wrapper">
          <div className="booking-product__rooms__header">
            <div className="booking-product__rooms__heading">{translations.SHARED.ROOMS}</div>
            <div className="booking-product__rooms__actions">
              <AmountInput
                label={translations.PRODUCT.NUMBER_OF_ROOMS}
                value={currentRooms.length}
                disabled={isDisabled}
                min={1}
                onChange={(value) => {
                  setRoomState(range(0, value).map(
                    (roomIndex) => currentRooms[roomIndex] ?? { adults: 2, children: 0, childAges: [] }
                  ));

                  setIsTouched(true);
                }}
              />
            </div>
          </div>
          <div className="booking-product__rooms-body">
            {currentRooms.map((room, roomIndex) => (
              <div className="booking-product__room" key={roomIndex}>
                <div className="booking-product__room__header">
                  <h3 className="booking-product__room__heading">
                    {translations.SHARED.ROOM + " " + (roomIndex + 1)}
                  </h3>
                  <div className="booking-product__room__actions">
                    <AmountInput
                      label={translations.SHARED.ADULTS}
                      value={room.adults}
                      disabled={isDisabled}
                      min={1}
                      onChange={(value) => {
                        setRoomState(
                          currentRooms.map((room, i) =>
                            i === roomIndex ? { ...room, adults: value } : room
                          )
                        );

                        setIsTouched(true);
                      }}
                    />
                    <AmountInput
                      label={translations.SHARED.CHILDREN}
                      value={room.children}
                      disabled={isDisabled}
                      onChange={(value) => {
                        setRoomState(
                          currentRooms.map((room, i) =>
                            i === roomIndex
                              ? {
                                ...room,
                                children: value,
                                childAges: range(0, value).map(
                                  (childIndex) => room.childAges[childIndex] ?? 0
                                ),
                              }
                              : room
                          )
                        );

                        setIsTouched(true);
                      }}
                    />
                  </div>
                </div>
                {room.children > 0 && (
                  <div className="booking-product__room-children">
                    <label className="booking-product__room-children-label">{translations.PRODUCT.AGE_BY_DEPARTURE_DATE}</label>
                    <div className="booking-product__room-children-ages">
                      {range(0, room.children).map((childIndex) => (
                        <AgeSelect
                          key={childIndex}
                          value={room.childAges[childIndex]}
                          disabled={isDisabled}
                          onChange={(value) => {
                            setRoomState(
                              currentRooms.map((room, selectorRoomIndex) =>
                                roomIndex === selectorRoomIndex
                                  ? {
                                    ...room,
                                    childAges: room.childAges
                                      .map((age, i) => (childIndex === i ? value : age))
                                      .sort((a, b) => b - a),
                                  }
                                  : room
                              )
                            );

                            setIsTouched(true);
                          }}
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
        <div className="booking-product__rooms-footer">
          {isDisabled
            ? (
              <button
                type="button"
                className={buildClassName(["cta--secondary", "cta--add"])}
                title={translations.PRODUCT.EDIT}
                onClick={() => {
                  setIsDisabled(false);
                  setIsTouched(false);
                }}
              >
                <span>
                  <Icon name="ui-pencil" width={25} height={25} />
                  {translations.PRODUCT.EDIT}
                </span>
              </button>)
            : (
              <button
                type="button"
                className={buildClassName(["cta", (isTouched ? "cta--secondary" : "cta--secondary"), "cta--add"])}
                title={translations.PRODUCT.APPLY}
                onClick={handleCloseClick}
              >
                <span>
                  <Icon name="ui-check"/>
                  {translations.PRODUCT.APPLY}
                </span>
              </button>
            )}
        </div>
      </div>
    </div >
  );
}

export default Rooms;