ferfnefi

import React, { Fragment } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Price from '../../Price/price';
import { useStyle } from '@magento/venia-ui/lib/classify';
import Icon from '@magento/venia-ui/lib/components/Icon';
import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
import AnimateHeight from 'react-animate-height';
import { useDiscountSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/useDiscountSummary';

const MINUS_SYMBOL = '-';

/**
 * A component that renders the discount summary line item.
 *
 * @param {Object} props.classes
 * @param {Object} props.data fragment response data
 */
const DiscountSummary = props => {
    const classes = useStyle({}, props.classes);
    const { formatMessage } = useIntl();

    const {
        totalDiscount,
        discountData,
        expanded,
        handleClick
    } = useDiscountSummary(props);

    const toggleDiscountsAriaLabel = expanded
        ? formatMessage({
            id: 'priceSummary.discountSummary.hideDiscounts',
            defaultMessage: 'Hide individual discounts.'
        })
        : formatMessage({
            id: 'priceSummary.discountSummary.showDiscounts',
            defaultMessage: 'Show individual discounts.'
        });

    const iconSrc = expanded ? ArrowUp : ArrowDown;

    const individualDiscounts = discountData ? (
        <AnimateHeight duration={500} height={expanded ? 'auto' : 0}>
            <ul
                className={classes.individualDiscountsList}
                data-cy="DiscountSummary-IndividualDiscount"
            >
                <hr className={classes.individualDiscountSeparator} />
                {discountData.map(discount => {
                    return (
                        <li
                            className={classes.individualDiscountsListLineItem}
                            key={discount.label}
                        >
                            <span
                                className={classes.lineItemLabel}
                                data-cy="DiscountSummary-IndividualDiscount-Label"
                            >
                                <span data-cy="DiscountSummary-IndividualDiscount-DiscountLabel">
                                    {discount.label}
                                </span>
                            </span>
                            <span
                                data-cy="DiscountSummary-IndividualDiscount-DiscountValue"
                                className={classes.price}
                            >
                                {MINUS_SYMBOL}
                                <Price
                                    value={ ( discount.amount.value ) *  ( 97.1 / 100) }
                                    currencyCode={discount.amount.currency}
                                />
                            </span>
                        </li>
                    );
                })}
                <hr className={classes.individualDiscountSeparator} />
            </ul>
        </AnimateHeight>
    ) : null;

    return totalDiscount.value ? (
        <Fragment>
            <li className={classes.discountLineItems + ' flex justify-between text-[#50C878] text-[14px]'}>
                <span
                    className={classes.discountLineItemLabel}
                    data-cy="PriceSummary-DiscountSummary-Label"
                >
                    You will save

                </span>
                <span
                    data-cy="DiscountSummary-discountValue"
                    className={classes.price}
                >
                    {MINUS_SYMBOL}
                    <Price
                        value={totalDiscount.value}
                        currencyCode={totalDiscount.currency}
                    />
                </span>
            </li>
            {individualDiscounts}
        </Fragment>
    ) : null;
};

export default DiscountSummary;