var __ = window.wp.i18n.__;
var createElement = window.wp.element.createElement;
var registerPlugin = window.wp.plugins.registerPlugin;
var useState = window.wp.element.useState;
var useEffect = window.wp.element.useEffect;
var useRef = window.wp.element.useRef;
var ExperimentalOrderShippingPackages = window.wc.blocksCheckout.ExperimentalOrderShippingPackages;
var select = window.wp.data.select;
var useDispatch = window.wp.data.useDispatch;
var wcBlocksData = window.wc.wcBlocksData;
var _createChangeLocationElement = undefined;

if (typeof lang === 'undefined') {
    lang = window.wp.i18n.getLocaleData()[""].lang;
} else if (lang === null) {
    lang = window.wp.i18n.getLocaleData()[""].lang;
}

function _trigger_list(type) {
    setShowLockerList(true);
}

// TODO: lock input field
_createChangeLocationElement = function () {
    let defaultLabelName = __('Change address', 'shipany');
    if (window?.shipany_setting?.shipany_enable_locker_list2_1) {
        defaultLabelName = shipany_setting.shipany_enable_locker_list2_1
    }

    return createElement('div', {
        id: 'shipany-woo-plugin-change-location',
        style: {
            marginLeft: '6px',
            display: 'inline',
            cursor: 'pointer'
        }
    }, createElement('div', null,
        createElement('a', {
            className: window?.shipany_setting?.display_as_a_button === 'yes' ? 'button wp-element-button' : '',
            style: {
                cursor: 'pointer'
            },
            onClick: _trigger_list
        }, defaultLabelName)
    ));
}
/**
 * `locker_list_shown` is to prevent multiple locker list trigger
 *  - true is to prevent the first trigger when page loaded
 *  - false is to allow the first trigger when page loaded
 */
var first_render = true;
var locker_list_shown = false;
var setShippingAddress;
var setBillingAddress;
var __internalSetUseShippingAsBilling;
var getUseShippingAsBilling;
if (window?.shipany_setting?.shipany_locker_list_selector === 'yes') {
    registerPlugin('sa-updated-address-type', {
        render: () => {
            setShippingAddress = useDispatch(wcBlocksData.CART_STORE_KEY).setShippingAddress;
            setBillingAddress = useDispatch(wcBlocksData.CART_STORE_KEY).setBillingAddress;
            __internalSetUseShippingAsBilling = useDispatch(wcBlocksData.CHECKOUT_STORE_KEY).__internalSetUseShippingAsBilling;
            getUseShippingAsBilling = select(wcBlocksData.CHECKOUT_STORE_KEY).getUseShippingAsBilling;
            const [showLockerList, setShowLockerList] = useState(true);
            useEffect(() => {
                fetchLockerListLink().then(lockerList => {
                    setShowLockerList(!!lockerList.length);
                });
            }, []);
            return createElement(ExperimentalOrderShippingPackages, null, showLockerList ? _createChangeLocationElement() : []);
        },
        scope: 'woocommerce-checkout',
    });
} else {
    registerPlugin('sa-change-address-btn', {
        render: () => {
            if (jQuery('[data-block-name="woocommerce/checkout"]').length) {
                console.log('useDispatch(wcBlocksData.CART_STORE_KEY)', useDispatch(wcBlocksData.CART_STORE_KEY));
                const _first_render = first_render;
                first_render = false;
                setShippingAddress = useDispatch(wcBlocksData.CART_STORE_KEY).setShippingAddress;
                setBillingAddress = useDispatch(wcBlocksData.CART_STORE_KEY).setBillingAddress;
                __internalSetUseShippingAsBilling = useDispatch(wcBlocksData.CHECKOUT_STORE_KEY).__internalSetUseShippingAsBilling;
                getUseShippingAsBilling = select(wcBlocksData.CHECKOUT_STORE_KEY).getUseShippingAsBilling;
                let shipping_rates = select(wcBlocksData.CART_STORE_KEY).getShippingRates();
                let cart_data = select(wcBlocksData.CART_STORE_KEY).getCartData();
                const shipping_address_line_1 = (cart_data && cart_data.shippingAddress && cart_data.shippingAddress.address_1) || '';
                shipping_rates = shipping_rates && shipping_rates[0] && shipping_rates[0].shipping_rates;
                if (shipping_rates) {
                    const selected_shipping_method = shipping_rates.find(x => x.selected);
                    if (selected_shipping_method?.rate_id === shipping_rates.find(x => x.method_id.startsWith('local_pickup'))?.rate_id) {
                        if (!locker_list_shown && !shipping_address_line_1.startsWith('[')) {
                            locker_list_shown = true;
                            if (_first_render) {
                                setTimeout(function () {
                                    _trigger_list();
                                }, 1000);
                            } else {
                                _trigger_list();
                            }
                        }
                        return createElement(ExperimentalOrderShippingPackages, null, [
                            _createChangeLocationElement(),
                        ]);
                    } else {
                        locker_list_shown = false;
                    }
                }
            }
        },
        scope: 'woocommerce-checkout',
    });
} 

var show_locker_list, setShowLockerList;
var lockerList, setLockerList;

const getModalStyles = (windowWidth) => ({
    overlay: {
        display: 'flex',
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        zIndex: '99999',
        backdropFilter: 'blur(3px)',
        overflow: 'auto',
    },
    content: {
        display: 'inline-table',
        margin: windowWidth <= 768 ? '0' : 'auto',
        width: windowWidth <= 768 ? '100%' : '90%',
        maxWidth: windowWidth <= 768 ? '100%' : '600px',
        minHeight: windowWidth <= 768 ? '100vh' : '',
        backgroundColor: 'white',
        borderRadius: windowWidth <= 768 ? '0' : '12px',
        padding: windowWidth <= 768 ? '16px' : '24px',
        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
        position: 'relative',
    },
    contentInner: {
        height: 'calc(100% - 40px - 10px)',
        display: 'flex',
        flexDirection: 'column',
    },
    selectContainer: {
        marginBottom: '24px',
        backgroundColor: '#f8f9fa',
        padding: '20px',
        borderRadius: '8px',
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
    },
    inputContainer: {
        width: '100%',
        boxSizing: 'border-box',
    },
    lockerListContainer: {
        flex: 1,
        marginTop: '16px',
        marginBottom: '16px',
        backgroundColor: '#f8f9fa',
        borderRadius: '8px',
        padding: '12px',
        display: 'flex',
        flexDirection: 'column',
        minHeight: 'calc(100% - 32px)',
    },
    lockerItem: {
        padding: '16px',
        marginBottom: '12px',
        border: '1px solid #e9ecef',
        borderRadius: '8px',
        cursor: 'pointer',
        backgroundColor: 'white',
        transition: 'all 0.2s ease',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
        '&:hover': {
            transform: 'translateY(-2px)',
            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
        }
    },
    lockerItemSelected: {
        border: '2px solid var(--wp--preset--color--primary, #2271b1)',
        backgroundColor: 'var(--wp--preset--color--background, #f6f7f7)',
        boxShadow: '0 2px 8px rgba(var(--wp--preset--color--primary, 34, 113, 177), 0.2)',
    },
    closeButton: {
        position: 'absolute',
        top: '16px',
        right: '16px',
        cursor: 'pointer',
        padding: '8px',
        fontSize: '24px',
        border: 'none',
        background: 'none',
        color: '#495057',
        transition: 'color 0.2s ease',
        '&:hover': {
            color: '#000',
        }
    }
});

const SELECT_STYLES = {
    container: {
        display: 'flex',
        flexWrap: 'wrap',
        gap: '16px',
        width: '100%',
    },
    select: {
        width: '100%',
        minWidth: '160px',
        padding: '10px 12px',
        borderRadius: '6px',
        border: '1px solid #ced4da',
        backgroundColor: 'white',
        fontSize: '14px',
        color: '#495057',
        transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
        cursor: 'pointer',
        '&:hover': {
            borderColor: 'var(--wp--preset--color--primary, #2271b1)',
        },
        '&:focus': {
            outline: 'none',
            borderColor: 'var(--wp--preset--color--primary, #2271b1)',
            boxShadow: '0 0 0 3px rgba(var(--wp--preset--color--primary, 34, 113, 177), 0.2)',
        }
    }
};

const VIRTUAL_SCROLL_STYLES = {
    viewport: {
        height: '100%',
        overflow: 'auto',
        position: 'relative',
        borderRadius: '8px',
        backgroundColor: 'white',
    },
    content: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
    },
    placeholder: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
    }
};

const BUFFER_SIZE = 5;

const VirtualScroller = ({ items, renderItem }) => {
    const [scrollTop, setScrollTop] = useState(0);
    const viewportRef = useRef(null);
    const ESTIMATED_ITEM_HEIGHT = 90;
    
    useEffect(() => {
        const element = viewportRef.current;
        if (!element) return;

        const handleScroll = () => {
            requestAnimationFrame(() => {
                setScrollTop(element.scrollTop);
            });
        };

        element.addEventListener('scroll', handleScroll, { passive: true });
        return () => element.removeEventListener('scroll', handleScroll);
    }, []);

    const totalHeight = items.length * ESTIMATED_ITEM_HEIGHT;
    const viewportHeight = viewportRef.current?.clientHeight || 0;
    
    const startIndex = Math.max(0, Math.floor(scrollTop / ESTIMATED_ITEM_HEIGHT) - BUFFER_SIZE);
    const endIndex = Math.min(
        items.length,
        Math.ceil((scrollTop + viewportHeight) / ESTIMATED_ITEM_HEIGHT) + BUFFER_SIZE
    );

    const visibleItems = items.slice(startIndex, endIndex);

    return createElement('div', {
        ref: viewportRef,
        style: {
            ...VIRTUAL_SCROLL_STYLES.viewport,
            height: '50vh',
            maxHeight: '100%',
            willChange: 'transform',
        },
    }, [
        createElement('div', {
            style: {
                ...VIRTUAL_SCROLL_STYLES.placeholder,
                height: `${totalHeight}px`,
            }
        }),
        createElement('div', {
            style: {
                ...VIRTUAL_SCROLL_STYLES.content,
                transform: `translateY(${startIndex * ESTIMATED_ITEM_HEIGHT}px)`,
            }
        }, visibleItems.map((item, index) => 
            createElement('div', {
                key: item.uid,
                style: {
                    minHeight: `${ESTIMATED_ITEM_HEIGHT}px`,
                }
            }, renderItem(item))
        ))
    ]);
};

const LockerListContainer = ({ lockerList, selectedLocker, setSelectedLocker, filters }) => {
    const filteredLockers = lockerList.filter(locker =>
        (!filters.reg || locker.addr.reg.toLowerCase() === filters.reg.toLowerCase()) && 
        (!filters.state || locker.addr.state.toLowerCase() === filters.state.toLowerCase()) && 
        (!filters.city || locker.addr.city.toLowerCase() === filters.city.toLowerCase()) &&
        (!filters.district || locker.addr.distr.toLowerCase() === filters.district.toLowerCase()) && 
        (!filters.type || locker.addr.typ.toLowerCase() === filters.type.toLowerCase()) &&
        (!filters.keyword || locker.name?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.code?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.reg?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.state?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.city?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.distr?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.lns[0]?.toLowerCase().includes(filters.keyword.toLowerCase()) || locker.addr.lns_cht[0]?.toLowerCase().includes(filters.keyword.toLowerCase()))
    );

    const renderLockerItem = (locker) => 
        createElement('div', {
            style: {
                ...getModalStyles(window.innerWidth).lockerItem,
                ...(selectedLocker === locker.uid ? getModalStyles(window.innerWidth).lockerItemSelected : {}),
            },
            onClick: () => {
                if (selectedLocker === locker.uid) {
                    setSelectedLocker('');
                } else {
                    setSelectedLocker(locker.uid);
                    const submitButton = document.querySelector('#shipany-woo-plugin-submit-button');
                    if (submitButton) {
                        setTimeout(() => {
                            submitButton.scrollIntoView({ behavior: 'smooth' });
                        }, 100);
                    }
                }
            }
        }, [
            createElement('div', {
                style: { fontWeight: '500', marginBottom: '5px' }
            }, `${locker.code} - ${locker[lang === 'zh' ? 'name_cht' : 'name'].replace(locker.code, '')} ${locker.addr[lang === 'zh' ? 'lns_cht' : 'lns'][0]}`),
            selectedLocker !== locker.uid && createElement('div', {
                style: { color: '#666', fontSize: '18px' }
            }, `${lang === 'zh' ? translateType(locker.addr.typ) : locker.addr.typ} | ${lang === 'zh' ? translateDistrict(locker.addr.state) : locker.addr.state}`),
            selectedLocker === locker.uid && createElement('div', {
                style: { color: '#666', fontSize: '18px' }
            }, locker[lang === 'zh' ? 'open_hours_cht' : 'open_hours']),
            selectedLocker === locker.uid && createElement('div', {
                style: { color: '#666', fontSize: '18px' }
            }, `${locker.addr[lang === 'zh' ? 'lns_cht' : 'lns'][0]}`),
            selectedLocker === locker.uid && createElement('div', {
                style: { color: '#666', fontSize: '18px' }
            }, `${lang === 'zh' ? translateType(locker.addr.typ) : locker.addr.typ}`)
        ]);

    return createElement(VirtualScroller, {
        items: filteredLockers,
        renderItem: renderLockerItem
    });
};

const LockerListModal = ({ show, onClose }) => {
    [lockerList, setLockerList] = useState([]);
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
    const [loading, setLoading] = useState(true);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const filters = ['reg', 'state', 'city', 'distr'].reduce((acc, key) => {
        acc[key] = useState('');
        return acc;
    }, {});

    const [selectedType, setSelectedType] = useState('');
    const [keyword, setKeyword] = useState('');
    const [selectedLocker, setSelectedLocker] = useState('');
    let lastKey = null;

    useEffect(() => {
        if (show) {
            document.body.style.overflow = 'hidden';

            const handleResize = () => {
                requestAnimationFrame(() => {
                    setWindowWidth(window.innerWidth);
                });
            };

            window.addEventListener('resize', handleResize);
            return () => {
                document.body.style.overflow = 'auto';
                window.removeEventListener('resize', handleResize);
            };
        }
    }, [show]);

    useEffect(async () => { // can load get-latest-locker-list-link before the modal is shown
        setLoading(true);
        setLockerList(await fetchLockerListLink());
        setLoading(false);
    }, []);

    if (!show) return null;

    const selectStyle = {
        ...SELECT_STYLES.select,
        flex: windowWidth <= 768 ? '1 1 calc(50% - 8px)' : '1 1 calc(25% - 8px)',
    };

    const inputStyle = {
        width: '100%',
        padding: '10px 12px',
        borderRadius: '6px',
        border: '1px solid #ced4da',
        backgroundColor: 'white',
        fontSize: '14px',
        color: '#495057',
        transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
        boxSizing: 'border-box',
        '&:focus': {
            outline: 'none',
            borderColor: 'var(--wp--preset--color--primary, #2271b1)',
            boxShadow: '0 0 0 3px rgba(var(--wp--preset--color--primary, 34, 113, 177), 0.2)',
        },
        '&::placeholder': {
            color: '#adb5bd',
        }
    };

    function getLockerSelectOptions(lockerList, key, filter = null) {
        const name = {
            'addr.reg': 'Region',
            'addr.state': 'State',
            'addr.city': 'City',
            'addr.distr': 'District',
            'addr.typ': 'Type',
        }[key] || key;
        const translate = {
            'addr.reg': translateRegion,
            'addr.state': translateDistrict,
            // 'addr.city': translateArea,
            'addr.distr': translateArea,
            'addr.typ': translateType,
        }[key];

        if (filter) {
            lockerList = lockerList.filter(filter);
        }
        const keyParts = key.split('.');

        const getNestedValue = (obj, path) => {
            return path.reduce((acc, part) => {
                return acc ? acc[part] : undefined;
            }, obj);
        };

        const uniqueValues = [...new Set(
            lockerList
                .map(locker => getNestedValue(locker, keyParts))
                .filter(Boolean)
        )];

        return [
            createElement('option', {
                value: '',
                key: 'default'
            }, __(`Select ${name}`, 'shipany')),
            ...uniqueValues.map(value =>
                createElement('option', {
                    value: value,
                    key: value
                }, lang === 'zh' && translate ? translate(value) : value)
            )
        ];
    }

    return createElement('div', {
        id: 'shipany-woo-plugin-locker-list',
        style: getModalStyles(windowWidth).overlay,
    }, createElement('div', {
        style: getModalStyles(windowWidth).content,
    }, [
        createElement('div', {
            style: { height: '50px' }
        }, ''),
        createElement('button', {
            style: getModalStyles(windowWidth).closeButton,
            onClick: onClose,
            'aria-label': 'Close'
        }, '×'),
        createElement('div', {
            style: getModalStyles(windowWidth).contentInner
        }, loading ?
            createElement('div', {
                style: {
                    textAlign: 'center',
                    padding: '20px'
                }
            }, 'Loading...') :
            [
                createElement('div', {
                    style: getModalStyles(windowWidth).selectContainer
                }, [
                    createElement('div', {
                        style: SELECT_STYLES.container
                    }, [
                        Object.keys(filters).map((key, _, arr) => lockerList.find(locker => locker.addr[key] !== '') && createElement('select', {
                            style: selectStyle,
                            onChange: (e) => {
                                let filled = false;
                                for (const filter of arr) {
                                    if (filled) {
                                        filters[filter][1]('');
                                    } else if (filter === key) {
                                        filters[filter][1](e.target.value);
                                        filled = true;
                                    }
                                }
                            }
                        }, getLockerSelectOptions(lockerList, `addr.${key}`, (() => {
                            const prevKey = lastKey;
                            lastKey = key;
                            if (prevKey) {
                                return locker => locker.addr[prevKey] === filters[prevKey][0];
                            } else {
                                return null;
                            }
                        })()))),
                        createElement('select', {
                            style: selectStyle,
                            onChange: (e) => {
                                setSelectedType(e.target.value);
                            }
                        }, getLockerSelectOptions(lockerList, 'addr.typ')),
                    ]),
                    createElement('div', {
                        style: getModalStyles(windowWidth).inputContainer
                    }, [
                        createElement('input', {
                            style: inputStyle,
                            onChange: (e) => {
                                setKeyword(e.target.value);
                            }
                        })
                    ])
                ]),
                createElement('div', {
                    style: getModalStyles(windowWidth).lockerListContainer
                }, createElement(LockerListContainer, {
                    lockerList,
                    selectedLocker,
                    setSelectedLocker,
                    filters: {
                        reg: filters.reg[0],
                        state: filters.state[0],
                        city: filters.city[0],
                        district: filters.distr[0],
                        type: selectedType,
                        keyword: keyword
                    }
                })),
                createElement('div', {
                    style: {
                        textAlign: 'center',
                        padding: '20px'
                    }
                },[
                    lockerList.find(locker => locker.uid === selectedLocker) && 
                    lockerList.find(locker => locker.uid === selectedLocker).latitude &&
                    lockerList.find(locker => locker.uid === selectedLocker).longitude &&
                    createElement('div', {
                        style: {
                            marginBottom: '20px',
                            borderRadius: '8px',
                            overflow: 'hidden',
                            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                            backgroundColor: '#f8f9fa',
                            padding: '16px',
                        }
                    }, [
                        createElement('div', {
                            style: {
                                position: 'relative',
                                width: '100%',
                                height: '0',
                                paddingBottom: '56.25%', // 16:9
                                borderRadius: '6px',
                                overflow: 'hidden',
                            }
                        },[
                            createElement('iframe', {
                                src: (() => {
                                    const locker = lockerList.find(locker => locker.uid === selectedLocker);
                                    return `https://maps.google.com/maps?q=${locker.latitude},${locker.longitude}&hl=en&z=19&output=embed&language=${lang}`;
                                })(),
                                style: {
                                    position: 'absolute',
                                    top: '0',
                                    left: '0',
                                    width: '100%',
                                    height: '100%',
                                    border: 'none',
                                },
                                allowFullScreen: true,
                                loading: 'lazy',
                                referrerPolicy: 'no-referrer-when-downgrade'
                            })
                        ]),
                    ]),
                    createElement('button', {
                        id: 'shipany-woo-plugin-submit-button',
                        className: 'button wp-element-button',
                        type: 'button',
                        disabled: !selectedLocker || isSubmitting,
                        onClick: async () => {
                            setIsSubmitting(true);
                            try {
                                const locker = lockerList.find(locker => locker.uid === selectedLocker);
                                let updateAddress = (arg) => new Promise((resolve, reject) => {
                                    const data = {
                                        shippingAddress1: `[${locker.code}] ${locker.addr.lns[0]}`,
                                        shippingAddress2: `[${locker.code}] ${locker.addr.lns_cht[0]}`,
                                        locationId: locker.uid,
                                        region: locker.addr.reg,
                                        district: locker.addr.distr,
                                        country: locker.addr.cnty
                                    };
                                    const fields = ['region', 'district'];
                                    let remainingLine = [];
                                    let i = 0;
                                    Object.keys(filters).map((key) => {
                                        if (locker.addr[key] && fields[i]) {
                                            data[fields[i]] = locker.addr[key];
                                            i++;
                                        } else {
                                            remainingLine.push(locker.addr[key]);
                                        }
                                    });
                                    data.shippingAddress1 = `${remainingLine.join(', ')}, ${data.shippingAddress1}`;
                                    jQuery.ajax({
                                        url: updateShippingAddressEndpoint,
                                        type: "POST",
                                        processData: true,
                                        headers: {
                                            "X-WP-Nonce": wp_rest_nonce
                                        },
                                        data,
                                        success: function (data) {
                                            resolve(data);
                                        },
                                        error: function (error) {
                                            reject(error);
                                        }
                                    })
                                });
                                const resp = await updateAddress(locker.addr);
                                setShippingAddress(resp.data.shipping);
                                __internalSetUseShippingAsBilling(resp.data.useShippingAsBilling);
                                setBillingAddress(resp.data.billing);
                                setShowLockerList(false);
                            } catch (error) {
                                console.error('Error updating address:', error);
                            } finally {
                                setIsSubmitting(false);
                            }
                        }
                    }, [
                        isSubmitting ? 
                        createElement('div', {
                            style: {
                                display: 'flex',
                                alignItems: 'center',
                                gap: '8px'
                            }
                        }, [
                            createElement('div', {
                                style: {
                                    width: '16px',
                                    height: '16px',
                                    border: '2px solid #ffffff',
                                    borderTopColor: 'transparent',
                                    borderRadius: '50%',
                                    animation: 'spin 1s linear infinite',
                                    '@keyframes spin': {
                                        '0%': { transform: 'rotate(0deg)' },
                                        '100%': { transform: 'rotate(360deg)' }
                                    }
                                }
                            }),
                            __('Submitting...', 'shipany')
                        ]) : 
                        __('Submit', 'shipany')
                    ]),
                    createElement('div', {
                        style: {
                            marginTop: '20px',
                            marginBottom: '-40px',
                            fontSize: '13px',
                            color: '#737373',
                            textAlign: 'center',
                            transform: 'translateY(-5px)',
                            textDecoration: 'none',
                        },
                    }, [
                        'Powered by ',
                        createElement('a', {
                            href: 'https://www.shipany.io',
                            target: '_blank',
                            rel: 'noopener',
                            style: {
                                color: '#15669d'
                            },
                        }, 'ShipAny')
                    ])
                ]),
            ],
        )
    ]));
};

registerPlugin('sa-locker-list', {
    render: () => {
        [showLockerList, setShowLockerList] = useState(false);

        return createElement(ExperimentalOrderShippingPackages, null,
            createElement(LockerListModal, {
                show: showLockerList,
                onClose: () => setShowLockerList(false)
            })
        );
    },
    scope: 'woocommerce-checkout',
});
