f3k

import React, { useEffect, useState } from 'react';

const ProductDetailsBlock = ({ customAttributes, classes, selectedColor, selectedSize,productDetails,breakDown }) => {

    var defaultWeight = null;

    if (Array.isArray(customAttributes)) {
        customAttributes.filter(customAttribute => {
            if (customAttribute.attribute_metadata.code === 'gold_weight') {
                defaultWeight = breakDown ? breakDown?.productDetails?.variant_weight : null;
                // defaultWeight = customAttribute?.entered_attribute_value?.value;
            }
        });
    }

    var defaultSize = null;

    if (Array.isArray(customAttributes)) {
        customAttributes.filter(customAttribute => {
            if (customAttribute.attribute_metadata.code === 'ring_size') {
                defaultSize = customAttribute?.selected_attribute_options?.attribute_option[0]?.label;
            }
        });
    }

    const [goldWeight, setGoldWeight] = useState(defaultWeight);

    useEffect(() => {
        selectedSize ?
            setGoldWeight(parseFloat(defaultWeight) + Math.max(parseFloat(selectedSize?.title) - defaultSize, 0) * 0.1)
            : setGoldWeight(defaultWeight)
    }, [selectedSize]);


    const hiddenTags = [
        'setting_type',
        'is_on_sale',
        'ready_to_ship',
        'best_seller',
        'new_launch',
        'make_on_order',
        'design_family',
        'is_outlet_available',
        'is_virtual_try_on',
        'glow_sku',
        'solitaire_without_diamond_price',
        'constituent_final_price'
    ];

    const getAttributeValue = (i) => {

        if (i?.attribute_metadata?.code == "gold_color") {
            return breakDown ? breakDown?.productDetails?.variant_color : null;
            // return selectedColor?.title ||
            //     i?.selected_attribute_options?.attribute_option.map((j, index) => {
            //         return index == i?.selected_attribute_options
            //             ?.attribute_option?.length - 1 ? j.label : j.label + ", "
            //     })
        }

        if (i?.attribute_metadata?.code == "ring_size") {
            return selectedSize?.title || defaultSize
        }
        if (i?.attribute_metadata?.code == "gold_weight") {
            return parseFloat(goldWeight).toFixed(2)
        }

        return i?.selected_attribute_options
            ?.attribute_option?.length ?
            i?.selected_attribute_options?.attribute_option.map((j, index) => {
                return index == i?.selected_attribute_options
                    ?.attribute_option?.length - 1 ? j.label : j.label + ", "
            })
            : i?.entered_attribute_value
                ?.value
                ? i?.entered_attribute_value
                    ?.value
                : ''
    }

    const attribute_label_value = productDetails ? Object.keys(productDetails).map((label, index) => (
        <table>
            <tbody>
                {
                    productDetails &&
                    productDetails[label]?.attribute_code === 'gemstone_weight' &&
                    productDetails[label]?.value == 0 ?  null :

                <tr key={index}>
                    <td
                        className={
                            classes.nameColumn +
                            ' font-semibold'
                        }
                    >
                        {productDetails[label]?.label}
                    </td>
                    <td>
                        {productDetails[label]?.value}
                        {productDetails[label]?.units}
                    </td>
                </tr>
                 }
            </tbody>
        </table>
    )) : null

    return (
        <div>
            <table>
                <tbody>
                    {customAttributes &&
                        customAttributes.map((i, index) => {
                            return (
                                !hiddenTags.includes(
                                    i?.attribute_metadata?.code
                                ) && (
                                    <tr key={index}>
                                        <td
                                            className={
                                                classes.nameColumn +
                                                ' font-semibold'
                                            }
                                        >
                                           {i?.attribute_metadata?.label}
                                        </td>
                                        <td>
                                            {getAttributeValue(i)}
                                        </td>
                                    </tr>
                                )
                            );
                        })}
                </tbody>
            </table>
            {attribute_label_value}
        </div>
    )
}

export default ProductDetailsBlock;