/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useResponsive } from '../../tools/widths/useResponsive';
import { createNamespace } from '../../tools/namingTools';
import VolumePricingCard from '../volume-pricing-card/VolumePricingCard';
import Icon from '../icon/Icon';
import './styles/VolumePricingModal.scss';

const n = createNamespace('VolumePricingModal');

const disableBodyScroll = () => document.body.classList.add('volumePricingModalBodyScrollDisable');
const enableBodyScroll = () => document.body.classList.remove('volumePricingModalBodyScrollDisable');

const VolumePricingModal = ({ isVisible, callback, volumePricingData, formattedTitle, data }) => {
    let variables;
    const { mediumDown: isMobile } = useResponsive();
    const { editions } = volumePricingData?.marketplaceProduct || {};
    const { closeLabel = 'Close' } = data;
    const close = () => {
        callback();
        enableBodyScroll();
    };

    useEffect(() => {
        isVisible && isMobile && disableBodyScroll();
        return () => enableBodyScroll();
    }, [isMobile, isVisible]);

    if (isVisible) {
        // eslint-disable-next-line prefer-destructuring
        const clientHeight = document.getElementById('footer')?.clientHeight;
        variables = clientHeight && {
            'scrim-height-cancom': `100% + ${clientHeight}px - 12rem`
        };
    }

    return isVisible ? (
        <div {...n('scrim').withVariables(variables && variables).props}>
            <div
                {...n('wrapper').props}
                data-testid="volumePricingModal"
            >
                <div {...n('header').props}>
                    <div {...n('title').props}>
                        {formattedTitle}
                    </div>
                    <div
                        {...n('closeWrapper').props}
                        onClick={close}
                        onKeyDown={close}
                        aria-label={closeLabel}
                    >
                        <div {...n('closeText').props}>{closeLabel}</div>
                        <div {...n('closeIcon').props}>
                            <Icon type="close" />
                        </div>
                    </div>
                </div>
                <div {...n('editionsWrapper').props} tabIndex="0">
                    <VolumePricingCard data={data} editions={editions} />
                </div>
            </div>
        </div>
    ) : null;
};

VolumePricingModal.propTypes = {
    isVisible: PropTypes.bool,
    callback: PropTypes.func,
    data: PropTypes.object,
    volumePricingData: PropTypes.object,
    formattedTitle: PropTypes.string
};

VolumePricingModal.defaultProps = {
    isVisible: false,
    callback: () => {},
    data: {},
    volumePricingData: {},
    formattedTitle: ''
};

export default VolumePricingModal;
