import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../tools/namingTools';
import { useResponsive } from '../../../tools/widths/useResponsive';
import { useRowHeights } from '../../../tools/heights/useRowHeights';
import { useItemsGrid } from '../../../tools/widths/useItemsGrid';
import { ANCHOR_PRODUCT_EDITIONS, ANCHOR_PRODUCT_ADDONS } from '../../../constants/anchors';
import SlickSlider from '../../slick-slider/SlickSlider';

import Addon from './atoms/Addon';
import { addonShape } from '../../../constants/components/prop-types/addon';
import Grid from '../../grid/Grid';
import './styles/ProductAddonList.scss';

const n = createNamespace('ProductAddonList');

export const ProductAddonListComponent = ({
    data,
    selectable,
    selectedAddons,
    onAddonSelect,
    onAddonRemove,
    onViewEditions,
    carouselEnabled
}) => {
    const { addonProducts = {} } = data;
    const { items = [] } = addonProducts;
    const i18n = {
        ...ProductAddonListComponent.defaultProps.data.addonProducts.i18n,
        ...addonProducts.i18n
    };
    const sliderRef = useRef(null);
    const [nameRefs, , heights] = useRowHeights(items.length);
    const [containerRef, gridColumns] = useItemsGrid();
    const { mediumDown } = useResponsive();
    const isMobile = mediumDown;
    const renderAddon = (addon, index) => (
        <Addon
            key={`addon-${addon.name}-${index}`}
            addon={addon}
            selectable={selectable}
            height={heights.main[index]}
            isSelected={!!selectedAddons.filter(candidateAddon => (candidateAddon.id === addon.id)).length}
            carouselEnabled={carouselEnabled}
            onAddonSelect={onAddonSelect}
            onAddonRemove={onAddonRemove}
            i18n={i18n}
            ref={nameRefs[index]}
        />
    );

    return !!items.length && (
        <section {...n('wrapper').props} id={ANCHOR_PRODUCT_ADDONS} ref={containerRef}>
            <header {...n('header').props}>
                {i18n.addons && <h2 {...n('title', i18n.viewEditions && 'with-link').props}>{i18n.addons}</h2>}
                {!isMobile && i18n.viewEditions && (
                    <a href={`#${ANCHOR_PRODUCT_EDITIONS}`} {...n('headerLink').props} onClick={() => onViewEditions()}>{i18n.viewEditions}</a>
                )}
            </header>
            <div {...n('content').props}>
                {carouselEnabled ? (
                    <SlickSlider
                        settings={{
                            ref: sliderRef,
                            dots: false,
                            infinite: false,
                            draggable: false
                        }}
                    >
                        {items.map(renderAddon)}
                    </SlickSlider>
                ) : (
                    <Grid maxCol={gridColumns}>
                        {items.map(renderAddon)}
                    </Grid>
                )}
            </div>
        </section>
    );
};

ProductAddonListComponent.schema = () => ({
    name: 'ProductAddons',
    title: 'uieditor.sfbComponent.addonsList.title',
    form: {},
    marketplaceData: {
        addonProducts: 'application.addonProducts'
    },
    requiredDataFunc: ({ addonProducts }) => (addonProducts && addonProducts.length)
});

ProductAddonListComponent.propTypes = {
    data: PropTypes.shape({
        addonProducts: addonShape
    }),
    selectedAddons: PropTypes.arrayOf(
        addonShape
    ),
    selectable: PropTypes.bool,
    onAddonSelect: PropTypes.func,
    onAddonRemove: PropTypes.func,
    onViewEditions: PropTypes.func,
    carouselEnabled: PropTypes.bool
};

ProductAddonListComponent.defaultProps = {
    selectable: false,
    onAddonSelect: () => {},
    onAddonRemove: () => {},
    onViewEditions: () => {},
    data: {
        addonProducts: {
            items: [],
            i18n: {
                added: 'Added',
                addons: 'Add-ons',
                addToOrder: 'Add to Order',
                audience: 'Ideal For',
                availableAddons: 'Available Add-ons',
                inclusions: 'Included',
                seePricingPlans: 'See Pricing Plans',
                selectAddonsTitle: 'Add-ons available for this plan',
                startingFrom: 'Starting From'
            }
        }
    },
    selectedAddons: [],
    carouselEnabled: false
};

export default ProductAddonListComponent;
