import {
  BookingPackageFlight,
  BookingPackageRoom,
  BookingPriceDetail,
} from "@qite/tide-client/build/types";
import { compact, isEmpty } from "lodash";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { buildClassName } from "../../../shared/utils/class-util";
import { formatPrice } from "../../../shared/utils/localization-util";
import ProductCard from "../../components/product-card";
import { selectTranslations } from "../booking/selectors";
import SidebarFlight from "./sidebar-flight";
import { getDatePeriodText } from "./sidebar-util";

interface SidebarProps {
  productName: string;
  thumbnailUrl?: string;
  isLoading: boolean;
  travelerRooms?: string[];
  startDateText?: string;
  endDateText?: string;
  departureFlight?: BookingPackageFlight;
  returnFlight?: BookingPackageFlight;
  basePrice?: number;
  totalPrice?: number;
  remainingAmountText?: string;
  includedCosts?: BookingPriceDetail[];
  extraCosts?: BookingPriceDetail[];
  deposit?: number;
  accommodations?: BookingPackageRoom[];
  isOnRequest?: boolean;
  headerComponent?: JSX.Element;
  footerComponent?: JSX.Element;
  loaderComponent?: JSX.Element;
}

const Sidebar: React.FC<SidebarProps> = ({
  productName,
  thumbnailUrl,
  isLoading,
  travelerRooms,
  startDateText,
  endDateText,
  departureFlight,
  returnFlight,
  basePrice,
  totalPrice,
  includedCosts,
  extraCosts,
  deposit,
  accommodations,
  isOnRequest,
  headerComponent,
  footerComponent,
  loaderComponent,
}) => {
  const [active, setActive] = useState<boolean>(false);
  const translations = useSelector(selectTranslations);  

  const canShowPriceBreakdownSection =
    Boolean(basePrice && basePrice > 0) ||
    !isEmpty(includedCosts) ||
    !isEmpty(extraCosts);
  const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);

  const remainingAmount = (totalPrice ?? 0) - (deposit ?? 0);

  const handleToggleClick = () => {
    setActive(!active);
  };

  return (
    <div
      className={buildClassName([
        "booking__sidebar",
        active && "booking__sidebar--active",
      ])}
    >
      {headerComponent}

      <div className="booking__sidebar-frame">
        <ProductCard
          productName={productName}
          thumbnailUrl={thumbnailUrl}
          handleToggleClick={handleToggleClick}
        />
        <div className="pricing-summary">
          <div className="pricing-summary__region">
            <div className="pricing-summary__group">
              <h6 className="pricing-summary__title">
                {translations.SIDEBAR.TRAVEL_INFO}
              </h6>
              {!isEmpty(travelerRooms) &&
                travelerRooms?.map((room, rIndex) => (
                  <div className="pricing-summary__row" key={rIndex}>
                    <div className="pricing-summary__property">
                      {translations.SHARED.ROOM} {rIndex + 1}
                    </div>

                    <div className="pricing-summary__value">{room}</div>
                  </div>
                ))}

              {startDateText && (
                <div className="pricing-summary__row">
                  <div className="pricing-summary__property">
                    {startDateText && endDateText
                      ? translations.SIDEBAR.DEPARTURE
                      : translations.SIDEBAR.DEPARTURE_SINGLE}
                  </div>
                  <div className="pricing-summary__value">{startDateText}</div>
                </div>
              )}

              {endDateText && (
                <div className="pricing-summary__row">
                  <div className="pricing-summary__property">
                    {translations.SIDEBAR.ARRIVAL}
                  </div>
                  <div className="pricing-summary__value">{endDateText}</div>
                </div>
              )}
            </div>

            {isLoading && loaderComponent}
            {!isLoading && departureFlight && returnFlight && (
              <>
                <SidebarFlight
                  title={translations.SIDEBAR.DEPARTURE_FLIGHT}
                  flight={departureFlight}
                />
                <SidebarFlight
                  title={translations.SIDEBAR.ARRIVAL_FLIGHT}
                  flight={returnFlight}
                />
              </>
            )}

            {accommodations && (
              <div className="pricing-summary__group">
                <h6 className="pricing-summary__title">
                  {translations.SIDEBAR.ACCOMMODATION}
                </h6>
                {accommodations.map((accommodation) => {
                  let option = accommodation.options.find((x) => x.isSelected);
                  return (
                    <div key={accommodation.index}>
                      <div className="pricing-summary__row">
                        <div className="pricing-summary__property">
                          {option?.accommodationName}
                          {isOnRequest
                            ? ` (${translations.SIDEBAR.ON_REQUEST})`
                            : ""}
                          {option?.isOnRequest
                            ? ` (${translations.SIDEBAR.ON_REQUEST})`
                            : ""}
                        </div>
                        {/*<div className="pricing-summary__value">
                          {option && option.price > 0 && formatPrice(option?.price)}
                        </div>*/}
                      </div>
                      <div className="pricing-summary__row">
                        <div className="price-summarty__property">
                          {option?.regimeName}
                        </div>
                        <div className="price-summary__value">
                          {getDatePeriodText(option?.from, option?.to, true)}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {!isLoading && canShowPriceBreakdownSection && (
            <div className="pricing-summary__region">
              {basePrice !== undefined && basePrice > 0 && (
                <div className="pricing-summary__group">
                  <div className="pricing-summary__row">
                    <div className="pricing-summary__property">
                      <h6 className="pricing-summary__title">
                        {translations.SIDEBAR.BASE_PRICE}
                      </h6>
                    </div>
                    <div className="pricing-summary__value">
                      {formatPrice(basePrice)}
                    </div>
                  </div>
                </div>
              )}
              {!isEmpty(includedCosts) && (
                <div className="pricing-summary__group">
                  <h6 className="pricing-summary__title">
                    {translations.SIDEBAR.INCLUDED_COSTS}
                  </h6>
                  {includedCosts?.map((priceDetail, index) => (
                    <React.Fragment
                      key={compact([
                        priceDetail.productCode,
                        priceDetail.accommodationCode,
                        index,
                      ]).join("_")}
                    >
                      <div className="pricing-summary__row">
                        <div className="pricing-summary__property">
                          {priceDetail.productName}
                        </div>
                        {priceDetail.showPrice && (
                          <div className="pricing-summary__value">
                            {formatPrice(
                              priceDetail.price * priceDetail.amount
                            )}
                          </div>
                        )}
                      </div>
                      <div className="pricing-summary__row">
                        <div className="price-summary__property">
                          {priceDetail.accommodationName ??
                            priceDetail.accommodationCode}
                        </div>
                      </div>
                    </React.Fragment>
                  ))}
                </div>
              )}
              {!isEmpty(extraCosts) && (
                <div className="pricing-summary__group">
                  <h6 className="pricing-summary__title">
                    {translations.SIDEBAR.EXTRA_COSTS}
                  </h6>
                  {extraCosts?.map((priceDetail, index) => (
                    <React.Fragment
                      key={compact([
                        priceDetail.productCode,
                        priceDetail.accommodationCode,
                        index,
                      ]).join("_")}
                    >
                      <div className="pricing-summary__row">
                        <div className="pricing-summary__property">
                          {priceDetail.productName}
                        </div>
                        {priceDetail.showPrice && (
                          <div className="pricing-summary__value">
                            {formatPrice(
                              priceDetail.price * priceDetail.amount
                            )}
                          </div>
                        )}
                      </div>
                      <div className="pricing-summary__row">
                        <div className="price-summary__property">
                          {priceDetail.accommodationName ??
                            priceDetail.accommodationCode}
                        </div>
                      </div>
                    </React.Fragment>
                  ))}
                </div>
              )}
            </div>
          )}

          {!isLoading && canShowTotalPriceSection && (
            <div className="pricing-summary__region pricing-summary__region--pricing">
              {deposit ? (
                <div className="pricing-summary__group">
                  {totalPrice !== undefined && totalPrice > 0 && (
                    <div className="pricing-summary__row pricing-summary__row--total-price">
                      <div className="pricing-summary__property">
                        <h6 className="pricing-summary__title">
                          {translations.SHARED.TOTAL_PRICE}
                        </h6>
                      </div>
                      <div className="pricing-summary__value">
                        <div className="pricing">
                          <div className="pricing__price">
                            {formatPrice(totalPrice)}
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                  <div className="pricing-summary__row">
                    <div className="pricing-summary__property">
                      <h6 className="pricing-summary__title">
                        {translations.SIDEBAR.DEPOSIT}
                      </h6>
                    </div>

                    <div className="pricing-summary__value">
                      <div className="pricing">
                        <div className="pricing__price">
                          {formatPrice(deposit)}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="pricing-summary__row">
                    <small>
                      <em>
                        {translations.SIDEBAR.DEPOSIT_TEXT1}
                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
                        {translations.SIDEBAR.DEPOSIT_TEXT3}
                        {formatPrice(remainingAmount)}
                        {translations.SIDEBAR.DEPOSIT_TEXT4}
                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
                        {translations.SIDEBAR.DEPOSIT_TEXT6}
                      </em>
                    </small>
                  </div>
                </div>
              ) : (
                <div className="pricing-summary__group">
                  {totalPrice !== undefined && totalPrice > 0 && (
                    <div className="pricing-summary__row">
                      <div className="pricing-summary__property">
                        <h6 className="pricing-summary__title">
                          {translations.SHARED.TOTAL_PRICE}
                        </h6>
                      </div>

                      <div className="pricing-summary__value">
                        <div className="pricing">
                          <div className="pricing__price">
                            {formatPrice(totalPrice)}
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
          {footerComponent}
        </div>
      </div>
    </div>
  );
};

export default Sidebar;