import React, { Fragment, FunctionComponent } from 'react';
import Card from '../../blocks/Card';
import DefaultLink from '../../blocks/Link';
import Button from '../../blocks/Button';
import classname from 'classnames';
import css from './index.module.css';
import { useSpring, animated } from 'react-spring';
import { getAmountWithCurrency, getReduction } from '../../helpers/priceHelper';
import Discount from '../../blocks/Discount';

export interface PackageListProps {
  items?: {
    id: string;
    isVisible: boolean;
  }[];
  isSelected?: boolean;
  isLoading?: boolean;
  hasAllItemsLoaded?: boolean;
  setIsLoading?: (isLoading) => void;
  updatePackageItems?: (items) => void;
  showMoreText?: string;
  emptyMessage: string;
  pagination: {
    hasAllItemsLoaded: boolean;
    isLoading: boolean;
    setIsLoading: (isLoading) => void;
    showMoreText: string;
  };
}

export const PackageListItem = ({ item, isSelected }): JSX.Element => {
  const Link = item.Link || DefaultLink;
  const animationProps = useSpring({
    to: { opacity: isSelected ? 1 : 0 },
    from: { opacity: 0 },
  });
  return (
    <animated.div
      className={classname(css.packageList__item, {
        [css.packageList__itemInitial]: isSelected && item.isVisible,
        [css.packageList__itemExtended]: !isSelected || !item.isVisible,
      })}
      style={isSelected && item.isVisible ? animationProps : {}}
    >
      {item?.type === 'Brand Box' ? (
        <Card
          {...item}
          variant={'redesign'}
          LinkProps={item.LinkProps}
          Link={Link}
          urlName={item.LinkProps.name}
          backgroundColor={'#DCE8ED'}
          campaign={item.CampaignProps?.event}
        >
          <div className={css.packageList__duration} />
        </Card>
      ) : (
        <Card
          {...item}
          variant={'redesign'}
          LinkProps={item.LinkProps}
          Link={Link}
          urlName={'Details'}
          backgroundColor={item?.isRemoteSupport ? '#151F32' : ''}
          campaign={item.CampaignProps?.event}
        >
          <div className={css.packageList__duration}>
            <span
              className={
                item.PriceProps.originalAmount
                  ? css.packageList__discounted_price
                  : ''
              }
            >
              {getAmountWithCurrency(
                item.PriceProps.amount,
                item.PriceProps.currency,
                item.partnerType,
              )}
            </span>
            &nbsp;
            {` /${item.duration} ${item.durationType}`}
            {item.PriceProps.originalAmount && (
              <Discount
                className={css.packageList__reduction}
                reduction={getReduction(
                  item.PriceProps.originalAmount,
                  item.PriceProps.amount,
                  item.PriceProps.currency,
                )}
              />
            )}
          </div>
        </Card>
      )}
    </animated.div>
  );
};

const PackageList: FunctionComponent<PackageListProps> = ({
  items,
  emptyMessage = '',
  updatePackageItems,
  pagination,
  isSelected,
}) => {
  const { hasAllItemsLoaded, isLoading, setIsLoading } = pagination;
  return (
    <Fragment>
      <div className={css.packageList}>
        {items &&
          items.map(item => {
            if (!item.isVisible) return null;
            return (
              <PackageListItem
                key={item.id}
                item={item}
                isSelected={isSelected}
              />
            );
          })}
      </div>

      {hasAllItemsLoaded ? (
        <div className={css.packageList__emptyMessage}>
          {hasAllItemsLoaded && (
            <span dangerouslySetInnerHTML={{ __html: emptyMessage }}></span>
          )}
        </div>
      ) : (
        <div className={css.packageList__showMore}>
          <Button
            variant="secondary"
            disabled={hasAllItemsLoaded}
            showThrobber={isLoading}
            handleClick={(): void => {
              setIsLoading(true);
              setTimeout(() => {
                updatePackageItems(items);
                setIsLoading(false);
              }, 888);
            }}
          >
            {pagination.showMoreText}
          </Button>
        </div>
      )}
    </Fragment>
  );
};

export default PackageList;