import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import Slider from '../../atoms/slider/Slider';
import { DYNAMICALLY_CURATED_CONTENT_TYPE } from '../../constants/components/slider';
import { NAMESPACES } from '../../constants/namespaces';
import { productSliderDataShape, productSliderSettingsShape } from '../../constants/components/prop-types/product-slider';
import { productSliderSchema, productSliderDefaultSettings } from '../../constants/components/schemas/product-slider';
import { PRODUCTS_LIST } from '../../constants/schemaComponentTypes';
import { createNamespace } from '../../tools/namingTools';
import { i18nMock } from '../../../mocks/productLists/i18n';
import withListener from '../withListener';

const n = createNamespace('ProductSlider');

export const ProductSliderComponent = ({
    data: {
        i18n
    },
    settings
}) => {
    const componentSettings = {
        ...ProductSliderComponent.defaultProps.settings,
        ...settings
    };

    const { productsList, sliderOptions: isSlider, maxRows, buttonLabel } = componentSettings;
    const { name = '', url = '', items, products, contentType } = productsList;
    const sliderProducts = items || products;
    const itemList = sliderProducts || [];
    const itemListRef = useRef(itemList);

    if (sliderProducts) {
        itemListRef.current = itemList;
    }
    return (
        <section {...n('container').withE2EId().props}>
            <Slider
                i18n={i18n}
                name={name}
                url={url}
                isSlider={isSlider}
                maxRows={maxRows && Number(maxRows)}
                buttonLabel={buttonLabel}
                contentType={contentType}
                items={itemListRef.current}
                settings={componentSettings}
            />
        </section>
    );
};

ProductSliderComponent.schema = () => ({
    name: 'Slider',
    title: 'uieditor.sfbComponent.slider.title',
    iconName: 'slider',
    componentTitleKey: 'sliderTitle',
    orderableSection: [
        NAMESPACES.home, NAMESPACES.listing, NAMESPACES.profile, NAMESPACES.profileEdition,
        NAMESPACES.profileFeatures, NAMESPACES.bundle, NAMESPACES.help
    ],
    form: {
        productsList: {
            title: 'uieditor.sfbComponent.slider.productsList.title',
            defaultValue: {
                name: '',
                url: '',
                items: [],
                contentType: DYNAMICALLY_CURATED_CONTENT_TYPE
            },
            type: PRODUCTS_LIST,
            required: true
        },
        ...productSliderSchema
    },
    marketplaceData: {
        items: 'productLists.customLists.hero.products',
        i18n: 'i18n'
    }
});

ProductSliderComponent.propTypes = {
    data: PropTypes.shape(productSliderDataShape),
    settings: PropTypes.shape(productSliderSettingsShape)
};

const SETTINGS = ProductSliderComponent.schema().form;

ProductSliderComponent.defaultProps = {
    data: {
        i18n: i18nMock
    },
    settings: {
        ...productSliderDefaultSettings,
        productsList: SETTINGS.productsList.defaultValue
    }
};

export default withListener(ProductSliderComponent);
