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;