import React, { useState } from 'react';
import { formatPrice } from '../utils/localization-util';
import { BookingPackageRoom, PackagingEntryLine, ServiceType } from '@qite/tide-client';
import { buildClassName } from '../utils/class-util';
import ProductCard from './product-card';
import { compact, isEmpty } from 'lodash';
import SidebarFlight from '../../booking-wizard/features/sidebar/sidebar-flight';
import { getDatePeriodText, getPaxTypeTranslation } from '../../booking-wizard/features/sidebar/sidebar-util';
import { PricePerPaxType } from '../../booking-wizard/types';

interface SharedSidebarProps {
  productName: string;
  thumbnailUrl?: string;
  isLoading?: boolean;
  travelerRooms?: string[];
  startDateText?: string;
  endDateText?: string;
  departureFlightMetaData?: any;
  returnFlightMetaData?: any;
  basePrice?: number;
  commission?: number;
  totalPrice?: number;
  remainingAmountText?: string;
  includedCosts?: any[];
  extraCosts?: any[];
  deposit?: number;
  accommodations?: BookingPackageRoom[];
  packagingAccommodations?: PackagingEntryLine[];
  includedServiceTypes?: number[];
  isOnRequest?: boolean;
  headerComponent?: React.ReactNode;
  footerComponent?: React.ReactNode;
  loaderComponent?: React.ReactNode;
  isUnavailable?: boolean;
  basePricePerPaxType?: PricePerPaxType[];
  seperateExtraPricePerPaxType?: PricePerPaxType[];
  translations: any;
  agent?: number;
}

const SharedSidebar: React.FC<SharedSidebarProps> = ({
  productName,
  thumbnailUrl,
  isLoading,
  translations,
  headerComponent,
  travelerRooms,
  startDateText,
  endDateText,
  loaderComponent,
  departureFlightMetaData,
  returnFlightMetaData,
  accommodations,
  packagingAccommodations,
  isOnRequest,
  includedServiceTypes,
  basePrice,
  commission,
  totalPrice,
  includedCosts,
  extraCosts,
  deposit,
  basePricePerPaxType,
  seperateExtraPricePerPaxType,
  isUnavailable,
  agent,
  footerComponent
}) => {
  if (!translations) return null;

  const [active, setActive] = useState<boolean>(false);

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

  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);

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

  const remainingAmount = Number(((totalPrice ?? 0) - (deposit ?? 0)).toFixed(2));

  // TODO: Determine currency code based on the data, for now default to EUR
  let currencyCode = 'EUR';

  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__wrapper">
            <div className="pricing-summary__region pricing-summary__region--fade-in">
              <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">
                        {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
                        {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
                      </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>
                )}

                {/* {lines.map((line: any, idx: number) => (
                  <div className="pricing-summary__row" key={line.guid || idx}>
                    <div className="pricing-summary__property">
                      {line.serviceType === 3 && (
                        <>
                          {line.productName} <br />
                          {line.accommodationName && <span>{line.accommodationName}</span>}
                          <br />
                          {line.from && line.to && (
                            <span>
                              {new Date(line.from).toLocaleDateString()} - {new Date(line.to).toLocaleDateString()}
                            </span>
                          )}
                        </>
                      )}
                      {line.serviceType === 7 && line.flightInformation && (
                        <>
                          <strong>{line.productName}</strong>
                          <br />
                          {line.flightInformation.flightLines &&
                            line.flightInformation.flightLines.map((flight: any, fIdx: number) => (
                              <div key={fIdx} style={{ marginBottom: 4 }}>
                                {flight.airlineDescription} {flight.flightNumber}
                                <br />
                                {flight.departureAirportDescription} ({flight.departureAirportCode}) {flight.departureTime} → {flight.arrivalAirportDescription}{' '}
                                ({flight.arrivalAirportCode}) {flight.arrivalTime}
                              </div>
                            ))}
                        </>
                      )}
                    </div>
                  </div>
                ))} */}
              </div>
              {isLoading && loaderComponent}

              {!isLoading && departureFlightMetaData && (
                <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} translations={translations} />
              )}

              {!isLoading && returnFlightMetaData && (
                <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} translations={translations} />
              )}

              {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">{!isFlightOnly && getDatePeriodText(translations, option?.from, option?.to, true)}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
              {packagingAccommodations && (
                <div className="pricing-summary__group">
                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
                  {packagingAccommodations.map((accommodation) => {
                    return (
                      <div key={accommodation.guid}>
                        <div className="pricing-summary__row">
                          <div className="pricing-summary__property">
                            {accommodation?.accommodationName}
                            {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">{accommodation?.regimeName}</div>
                          <div className="price-summary__value">
                            {!isFlightOnly && getDatePeriodText(translations, accommodation?.from, accommodation?.to, true)}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {!isLoading && canShowPriceBreakdownSection && (
              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
                {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, currencyCode)}</div>
                    </div>
                    {basePricePerPaxType &&
                      basePricePerPaxType.map((ppt, index) => (
                        <React.Fragment key={`${ppt.paxType}-${index}`}>
                          <div className="pricing-summary__row">
                            <div className="pricing-summary__property">
                              {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
                            </div>
                            <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
                          </div>
                          {ppt.details.map((detail, dIndex) => (
                            <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
                              <div className="pricing-summary__property">
                                {detail.numberOfPax}x {detail.description}
                              </div>
                              <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
                            </div>
                          ))}
                        </React.Fragment>
                      ))}
                  </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, currencyCode)}</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, currencyCode)}</div>
                          )}
                        </div>
                        <div className="pricing-summary__row">
                          <div className="pricing-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
                        </div>
                        {seperateExtraPricePerPaxType &&
                          seperateExtraPricePerPaxType.map((ppt, index) => (
                            <React.Fragment key={`${ppt.paxType}-${index}`}>
                              <div className="pricing-summary__row">
                                <div className="pricing-summary__property">
                                  {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
                                </div>
                                <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
                              </div>
                              {ppt.details.map((detail, dIndex) => (
                                <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
                                  <div className="pricing-summary__property">
                                    {detail.numberOfPax}x {detail.description}
                                  </div>
                                  <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
                                </div>
                              ))}
                            </React.Fragment>
                          ))}
                      </React.Fragment>
                    ))}
                  </div>
                )}
              </div>
            )}

            {!isLoading && canShowTotalPriceSection && !isUnavailable && (
              <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
                {deposit && remainingAmount > 0 ? (
                  <div className="pricing-summary__group">
                    {agent && (
                      <div className="pricing-summary__row pricing-summary__row--total-price">
                        <div className="pricing-summary__property">
                          <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
                        </div>
                        <div className="pricing-summary__value">
                          <div className="pricing">
                            <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
                          </div>
                        </div>
                      </div>
                    )}
                    {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, currencyCode)}</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, currencyCode)}</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, currencyCode)}
                          {translations.SIDEBAR.DEPOSIT_TEXT4}
                          <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
                          {translations.SIDEBAR.DEPOSIT_TEXT6}
                        </em>
                      </small>
                    </div>
                  </div>
                ) : (
                  <div className="pricing-summary__group">
                    {agent && (
                      <div className="pricing-summary__row pricing-summary__row--total-price">
                        <div className="pricing-summary__property">
                          <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
                        </div>
                        <div className="pricing-summary__value">
                          <div className="pricing">
                            <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
                          </div>
                        </div>
                      </div>
                    )}
                    {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, currencyCode)}</div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}

            {footerComponent}

            {/* <div className="pricing-summary__region pricing-summary__region--pricing pricing-summary__region--fade-in">
              <div className="pricing-summary__group">
                <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(price || 0, 'EUR')}</div>
                    </div>
                  </div>
                </div>
                {depositAmount > 0 && (
                  <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(depositAmount, 'EUR')}</div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SharedSidebar;