frk

import React, { useState, useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Price from '../../Price/price';
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
import Button from '@magento/venia-ui/lib/components/Button';
import { useStyle } from '@magento/venia-ui/lib/classify';
import defaultClasses from '@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.module.css';
import DiscountSummary from './discountSummary';
import GiftCardSummary from './giftCardSummary';
import GiftOptionsSummary from './giftOptionsSummary';
import ShippingSummary from './shippingSummary';
import TaxSummary from './taxSummary';
import secured from './Images/secured.svg';
import { useSelector, useDispatch } from 'react-redux';
import { sendQuotation } from '../../../reducers/CustomReducer';
import { GTMEventTrigger } from '../../../lib/util/GTMEventTrigger';
import PointsRedeem from './PointsRedeem'
import { useCartPage } from '../../../talons/CartPage/useCartPage';
import { netcoreEvent } from '../../../initialize-netcore.js';
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
import { gql, useQuery } from '@apollo/client';

const PriceSummary = props => {
    const { isUpdating, pointsDiscount, cartItems } = props;
    const classes = useStyle(defaultClasses, props.classes);
    const talonProps = usePriceSummary();
    const CartUpdateProps = useCartPage();
    const { getCartDetails } = CartUpdateProps;

    const {
        handleProceedToCheckout,
        hasError,
        hasItems,
        isCheckout,
        isLoading,
        flatData
    } = talonProps;
    const { formatMessage } = useIntl();

    const dispatch = useDispatch();

    const customData = useSelector(state => state.custom);
    const { storeUserInfo, removePointsInfo, redeemPointsInfo } = customData;

    const isStoreUser = storeUserInfo?.isStorefrontUser;

    const handleSendQuotation = () => {
        dispatch(sendQuotation());
    };

    const {
        subtotal,
        total,
        discounts,
        giftCards,
        giftOptions,
        taxes,
        shipping
    } = flatData;

    useEffect(() => {
        getCartDetails()
    }, [pointsDiscount])

    const GET_PRODUCT_DETAILS = gql`
        query getProducts($sku:[String]){
        products(filter: { sku:{in:$sku} }) {
            items{
                id
                sku
                uid
                name
                stock_status
                price_range {
                maximum_price {
                    final_price {
                        currency
                        value
                    }
                    regular_price {
                        currency
                        value
                    }
                    discount {
                        amount_off
                    }
                }
            }
            categories {
                uid
                name
                is_anchor
                url_key
                url_path
                level
                display_mode
                default_sort_by
                description
              }
              small_image{
                url
                label
              }
              url_key
            }
        }
    }

    `
    let cartInfo = cartItems && cartItems?.map((item) => {
        return item?.product?.sku;

     });
    var {error,loading,data} = useQuery(GET_PRODUCT_DETAILS, {
        fetchPolicy: 'cache-and-network',
        nextFetchPolicy: 'cache-first',
        variables: {
        sku:cartInfo

        }
    });
    let categories = data?.products?.items[0]?.categories?.map(({name}) => name);
    const allCartItems = cartItems && cartItems?.map((item) => {
        return {
                'prid' : item?.product?.uid,
                'name': item?.product?.name,
                'brand' : 'glow',
                'price': item?.prices?.row_total.value,
                'sale_price': item?.prices?.row_total.value,
                'prqt': item.quantity,
                'product_image': item?.product?.thumbnail?.url,
                'price': item?.prices?.row_total.value,
                'currency': item?.prices?.price?.currency,
                'produrl': resourceUrl(`${location.host}/${item?.product?.url_key}` || ''),
                }
        });
    const isPriceUpdating = isUpdating || isLoading;
    const priceClass = isPriceUpdating ? classes.priceUpdating : classes.price;
    const totalPriceClass = isPriceUpdating
        ? classes.priceUpdating
        : classes.totalPrice;

    const totalPriceLabel = isCheckout
        ? formatMessage({
            id: 'priceSummary.total',
            defaultMessage: 'Total'
        })
        : formatMessage({
            id: 'priceSummary.estimatedTotal',
            defaultMessage: 'Estimated Total'
        });


    if (hasError) {
        return (
            <div className={classes.root}>
                <span className={classes.errorText}>
                    <FormattedMessage
                        id={'priceSummary.errorText'}
                        defaultMessage={
                            'Something went wrong. Please refresh and try again.'
                        }
                    />
                </span>
            </div>
        );
    } else if (!hasItems) {
        return null;
    }

    const proceedToCheckoutButton = !isCheckout ? (
        <div
            className={classes.checkoutButton_container + ' mt-[-0.5rem] pb-4'}
        >
            <Button
                disabled={isPriceUpdating}
                priority={'high'}
                onClick={() => {
                    handleProceedToCheckout();
                    GTMEventTrigger({ route: window.location.pathname, event: 'proceed_checkout', title: document.title })
                    netcoreEvent('dispatch', 'Checkout', {
                        "total_items" : cartItems?.length,
                        "amount" : total?.value,
                        "Currency" : total.currency,
                        "items" : allCartItems
                    });
                }}
                data-cy="PriceSummary-checkoutButton"
                className="font-lato text-[12px] w-full mt-4 text-[#fff] px-6 py-3 tracking-[2.4px] rounded-[10px] uppercase bg-[#181A1D] checkout-button-section"
            >
                <FormattedMessage
                    id={'priceSummary.checkoutButton1'}
                    defaultMessage={'PROCEED TO CHECKOUT'}
                />
            </Button>
        </div>
    ) : null;

    const sendQuotationButton = !isCheckout ? (
        <div
            className={
                classes.checkoutButton_container +
                ' mt-[-0.5rem] pb-4 send-quotation-btn'
            }
        >
            <Button
                disabled={isPriceUpdating}
                priority={'high'}
                onClick={() => handleSendQuotation()}
                data-cy="PriceSummary-checkoutButton"
                className="font-lato text-[12px] w-full mt-4 text-[#fff] px-6 py-3 tracking-[2.4px] rounded-[10px] uppercase bg-[#181A1D]"
            >
                <FormattedMessage
                    id={'priceSummary.checkoutButton1'}
                    defaultMessage={'SEND PRICE LIST'}
                />
            </Button>
        </div>
    ) : null;

    const printQuotationButton = !isCheckout ? (
        <div
            className={
                classes.checkoutButton_container +
                ' mt-[-0.5rem] pb-4 send-quotation-btn'
            }
        >
            <Button
                disabled={isPriceUpdating}
                priority={'high'}
                onClick={() => print()}
                data-cy="PriceSummary-printButton"
                className="font-lato text-[12px] w-full -mt-3 text-[#fff] px-6 py-3 tracking-[2.4px] rounded-[10px] uppercase bg-[#181A1D]"
            >
                <FormattedMessage
                    id={'priceSummary.checkoutButton1'}
                    defaultMessage={'PRINT'}
                />
            </Button>
        </div>
    ) : null;


    return (
        <div className={classes.root} data-cy="PriceSummary-root">
            <div className="px-[20px] py-[16px] bg-[#F1F5EB] rounded-[10px] main_order_summary_section">
                <h1 className="font-regular text-[20px] text-[#181A1D] order_summary_section border-b-[#CED8C3] border-b-[1px] mb-[20px] pb-[20px] border-b-solid">
                    Cart Summary
                </h1>
                <ul>
                    <li className={classes.lineItems + ' text-[14px]'}>
                        <span
                            data-cy="PriceSummary-lineItemLabel"
                            className={
                                classes.lineItemLabel +
                                ' font-lato font-regular text-[#181A1D]'
                            }
                        >
                            <FormattedMessage
                                id={'priceSummary.lineItemLabel1'}
                                defaultMessage={'Sub Total'}
                            />
                        </span>
                        <span
                            data-cy="PriceSummary-subtotalValue"
                            className={
                                priceClass +
                                ' font-lato font-medium text-[14px] text-[#181A1D]'
                            }
                        >
                            <Price
                                value={subtotal.value}
                                currencyCode={subtotal.currency}
                            />
                        </span>
                    </li>
                    <li className={classes.lineItems}>
                        <GiftCardSummary
                            classes={{
                                lineItemLabel: classes.lineItemLabel,
                                price: priceClass
                            }}
                            data={giftCards}
                        />
                    </li>
                    <li className={classes.lineItems}>
                        <GiftOptionsSummary
                            classes={{
                                lineItemLabel: classes.lineItemLabel,
                                price: priceClass
                            }}
                            data={giftOptions}
                        />
                    </li>
                    <li className={classes.lineItems + ' text-[14px]'}>
                        <TaxSummary
                            classes={{
                                lineItemLabel: classes.lineItemLabel,
                                price: priceClass
                            }}
                            data={taxes}
                            isCheckout={isCheckout}
                        />
                    </li>

                    <DiscountSummary
                        classes={{
                            lineItems: classes.lineItems,
                            lineItemLabel: classes.lineItemLabel,
                            price: priceClass
                        }}
                        data={discounts}
                    />
                    <PointsRedeem
                        classes={{
                            lineItems: classes.lineItems,
                            lineItemLabel: classes.lineItemLabel,
                            price: priceClass
                        }}

                        pointsDiscount={pointsDiscount}
                        currency={"INR"}
                    />
                    <li className={classes.lineItems}>
                        <ShippingSummary
                            classes={{
                                lineItemLabel:
                                    classes.lineItemLabel +
                                    ' font-lato font-regular text-[14px] text-[#181A1D]',
                                price:
                                    priceClass +
                                    ' font-lato font-regular text-[14px] text-[#181A1D]'
                            }}
                            data={shipping}
                            isCheckout={isCheckout}
                        />
                    </li>

                    <li className="flex items-center justify-between mt-4 pt-3 pb-4">
                        <div>
                            <span className="font-lato font-semibold text-[22px] text-[#181A1D]">
                                Total
                            </span>
                        </div>
                        <div>

                            <li className={classes.lineItems + ' gap-0'}>
                                <span
                                    data-cy="PriceSummary-subtotalValue"
                                    className={
                                        priceClass +
                                        ' font-lato font-semibold text-[22px] text-[#181A1D]'
                                    }
                                >
                                    <Price
                                        value={total.value}
                                        currencyCode={subtotal.currency}
                                    />
                                </span>
                            </li>
                        </div>
                    </li>
                    {isStoreUser
                        ? sendQuotationButton
                        : proceedToCheckoutButton}
                    {isStoreUser ? printQuotationButton : null}
                </ul>
            </div>
            <section className="flex bg-[#F8F5FA] rounded-[10px] p-4 mt-4 items-center justify-between secured_section">
                <div className="flex flex-col items-center">
                    <img
                        src={secured}
                        alt="secured payment"
                        className="w-[50px] h-[50px] mb-3"
                    />
                    <span className="font-lato text-[12px] text-[#181A1D] text-center">
                        Secured Payments
                    </span>
                </div>
                <div className="flex flex-col items-center">
                    <img
                        src={secured}
                        alt="Genuine products"
                        className="w-[50px] h-[50px] mb-3"
                    />
                    <span className="font-lato text-[12px] text-[#181A1D] text-center">
                        Genuine Products
                    </span>
                </div>
                <div className="flex flex-col items-center">
                    <img
                        src={secured}
                        alt="Brand warranty"
                        className="w-[50px] h-[50px] mb-3"
                    />
                    <span className="font-lato text-[12px] text-[#181A1D] text-center">
                        Brand Warranty
                    </span>
                </div>
            </section>
        </div>
    );
};

export default PriceSummary;