import React, { FC, ReactType } from 'react';

import css from './index.module.css';
import Button from '../../blocks/Button';

interface Partner {
  firstName?: string;
  lastName?: string;
  mobilePhone?: string;
}

interface ServicePackage {
  id: number;
  name: string;
  price: string;
  currency: string;
}

interface ServiceCallProps {
  id: number;
  milaInternalId: string;
  trackerUrlSafeId: string;
  status: string;
  StatusLink: ReactType;
  date: string;
  name: string;
  totalPrice: number;
  totalPriceDiscounted: number;
  currency: string;
  priceHappines: number;
  servicePackages: [ServicePackage];
  partner: Partner;
  cancelable: boolean;
}

export interface ServiceCallsInformationProps {
  serviceCalls?: [ServiceCallProps];
  priceHappinesLabel?: string;
  serviceNumberLabel?: string;
  partnerLabel?: string;
  additionalPriceInfoLabel?: string;
  recommendedPriceLabel?: string;
  appointmentLabel?: string;
  appointmentDeterminedLabel?: string;
  canceledLabel?: string;
  cancelButtonLabel?: string;
  rateUsButtonLabel?: string;
  handleOnCancel?: (id) => void;
  handleRateUs?: (id: string) => void;
}

const ServiceCallsInformation: FC<ServiceCallsInformationProps> = ({
  serviceCalls,
  priceHappinesLabel,
  serviceNumberLabel,
  additionalPriceInfoLabel,
  recommendedPriceLabel,
  appointmentLabel,
  appointmentDeterminedLabel,
  handleOnCancel,
  cancelButtonLabel,
  rateUsButtonLabel,
  canceledLabel,
  handleRateUs,
}) => (
  <div className={css.serviceCallsInformation}>
    {serviceCalls &&
      serviceCalls.map(serviceCall => (
        <div className={css.serviceCallsInformation__item} key={serviceCall.id}>
          <div className={css.serviceCallsInformation__itemHeader}>
            <div className={css.serviceCallsInformation__itemNumber}>
              {serviceNumberLabel}: #
              {serviceCall.milaInternalId &&
                serviceCall.milaInternalId.slice(0, 6)}
            </div>
            <div className={css.serviceCallsInformation__itemStatus}>
              {serviceCall.StatusLink && (
                <serviceCall.StatusLink
                  className={css.serviceCallsInformation__itemLink}
                />
              )}
            </div>
            {serviceCall.status !== 'Canceled' ? (
              <div>
                {appointmentLabel}:{' '}
                {serviceCall.date
                  ? serviceCall.date
                  : appointmentDeterminedLabel}
              </div>
            ) : (
              <div>{canceledLabel}</div>
            )}
            {serviceCall.partner && (
              <div className={css.serviceCallsInformation__partner}>
                {serviceCall.partner.firstName} {serviceCall.partner.lastName} (
                {serviceCall.partner.mobilePhone})
              </div>
            )}
          </div>
          <div className={css.serviceCallsInformation__itemBody}>
            {serviceCall.servicePackages &&
              serviceCall.servicePackages.map(servicePackage => (
                <div
                  className={css.serviceCallsInformation__package}
                  key={servicePackage.id}
                >
                  <div>{servicePackage.name}</div>
                  <div>
                    {servicePackage.currency} {servicePackage.price}
                  </div>
                </div>
              ))}
            {!!serviceCall.priceHappines && (
              <div className={css.serviceCallsInformation__package}>
                <div>{priceHappinesLabel}</div>
                <div>
                  {serviceCall.currency} {serviceCall.priceHappines}
                </div>
              </div>
            )}
          </div>
          <div className={css.serviceCallsInformation__total}>
            <div>
              Total{' '}
              {additionalPriceInfoLabel && (
                <span
                  className={css.serviceCallsInformation__additionalPriceInfo}
                >
                  ({additionalPriceInfoLabel})
                </span>
              )}
            </div>
            <div className={css.serviceCallsInformation__itemTotalPrice}>
              {serviceCall.currency}{' '}
              <span
                className={
                  serviceCall.totalPriceDiscounted
                    ? css.serviceCallsInformation__priceDiscounted
                    : ''
                }
              >
                {serviceCall.totalPrice}
              </span>{' '}
              {serviceCall.totalPriceDiscounted}
            </div>
          </div>

          {handleOnCancel && serviceCall.cancelable && (
            <div className={css.serviceCallsInformation__cancel}>
              <Button
                size="small"
                handleClick={(): void =>
                  handleOnCancel(serviceCall.milaInternalId)
                }
              >
                {cancelButtonLabel}
              </Button>
            </div>
          )}

          {!serviceCall.cancelable &&
            serviceCall.status !== 'Canceled' &&
            serviceCall.status !== 'Unsuccessful' && (
              <div className={css.serviceCallsInformation__cancel}>
                <Button
                  size="small"
                  handleClick={(): void =>
                    handleRateUs(serviceCall.trackerUrlSafeId)
                  }
                >
                  {rateUsButtonLabel}
                </Button>
              </div>
            )}
        </div>
      ))}

    {recommendedPriceLabel && serviceCalls.length && (
      <div className={css.serviceCallsInformation__packageAdditionalInfo}>
        * {recommendedPriceLabel}
      </div>
    )}
  </div>
);

export default ServiceCallsInformation;