import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { MANUALLY_CURATED_CONTENT_TYPE, DYNAMICALLY_CURATED_CONTENT_TYPE } from '../../constants/components/slider';
import Slider,
{ sliderSchemaForm, sliderSettingShape, sliderDefaultSettings } from '../../atoms/slider/Slider';
import { createNamespace } from '../../tools/namingTools';
import { RADIO, PRODUCTS_LIST, TOGGLE, INPUT } from '../../constants/schemaComponentTypes';
import { NAMESPACES } from '../../constants/namespaces';
import './styles/ProductSlider.scss';

import withListener from '../withListener';

const n = createNamespace('ProductSlider');

const NUM_ROWS_OPTIONS = [
    { value: '1', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.one' },
    { value: '2', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.two' },
    { value: '3', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.three' }
];


export const ProductSliderComponent = ({
    data,
    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 (
        <div {...n('container').withE2EId().props}>
            <Slider
                i18n={data.i18n}
                name={name}
                url={url}
                isSlider={isSlider}
                maxRows={maxRows && Number(maxRows)}
                buttonLabel={buttonLabel}
                contentType={contentType}
                items={itemListRef.current}
                settings={componentSettings}
            />
        </div>
    );
};

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
        },
        sliderOptions: {
            title: 'uieditor.sfbComponent.slider.sliderOptions.title',
            type: TOGGLE,
            required: true,
            defaultValue: true,
            labelOn: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.labelOn',
            labelOff: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.labelOff',
            caption: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.caption',
            customStyle: {
                marginSize: 0
            }
        },
        maxRows: {
            type: RADIO,
            required: true,
            defaultValue: NUM_ROWS_OPTIONS[1].value,
            options: NUM_ROWS_OPTIONS,
            conditionalAttributes: {
                isDisabled: {
                    when: 'sliderOptions',
                    connector: 'equals',
                    value: true
                }
            },
            validation: {
                availableOptions: NUM_ROWS_OPTIONS.map(({ value }) => value),
                message: 'uieditor.sfbComponent.radio.validation.message',
                default: 'uieditor.sfbComponent.dropdown.defaultValue'
            }
        },
        buttonLabel: {
            title: 'uieditor.sfbComponent.slider.buttonLabel.title',
            placeholder: 'uieditor.sfbComponent.slider.buttonLabel.placeholder',
            defaultValue: 'uieditor.sfbComponent.slider.buttonLabel.defaultValue',
            type: INPUT,
            required: true,
            validation: {
                pattern: /^[a-zA-Z0-9 ]+$/gm,
                message: 'uieditor.sfbComponent.input.validation.message'
            }
        },
        ...sliderSchemaForm
    },
    marketplaceData: {
        items: 'productLists.customLists.hero.products',
        i18n: 'i18n'
    }
});

ProductSliderComponent.propTypes = {
    data: PropTypes.shape({
        i18n: PropTypes.object
    }),
    settings: PropTypes.shape({
        ...sliderSettingShape,
        productsList: PropTypes.shape({
            name: PropTypes.string,
            url: PropTypes.string,
            products: PropTypes.arrayOf(
                PropTypes.shape({
                    title: PropTypes.string
                })
            ),
            items: PropTypes.arrayOf(
                PropTypes.shape({
                    title: PropTypes.string
                })
            ),
            contentType: PropTypes.oneOf([MANUALLY_CURATED_CONTENT_TYPE, DYNAMICALLY_CURATED_CONTENT_TYPE])
        }),
        maxRows: PropTypes.string,
        buttonLabel: PropTypes.string,
        sliderOptions: PropTypes.bool
    })
};

const SETTINGS = ProductSliderComponent.schema().form;

ProductSliderComponent.defaultProps = {
    data: {},
    settings: {
        ...sliderDefaultSettings,
        productsList: SETTINGS.productsList.defaultValue,
        maxRows: SETTINGS.maxRows.defaultValue,
        buttonLabel: SETTINGS.buttonLabel.defaultValue,
        sliderOptions: true
    }
};

export default withListener(ProductSliderComponent);
