import containerConnect from 'Framework/ComponentContainer';
import { setVisible } from 'App/Reducers/UI/Actions';
import * as configuratorActions from 'App/Reducers/Configurator/Actions';

import ConfigurationvariantSelection from '../../Components/ConfigurationvariantSelection';
import ConfigurationvariantItem from '../../Components/ConfigurationvariantItem';
import DefaultCarousel from 'Framework/Components/Carousel';

const mapStateToProps = ({ ui, configurator, device }) => {
    return {
        Component: ConfigurationvariantSelection,
        ItemComponent: ConfigurationvariantItem,
        Carousel: DefaultCarousel,

        show: !!ui.visibilityMap.configurationVariantSelection,
        configurationvariants: configurator.configurationvariants,
        selectedItem: configurator.configuration.item.identifier,
        screen: device.screen, // should re-render when the screen size changes

        showConfigurationVariantSelection: ui.visibilityMap.configurationvariantSelection,
    };
};

const mapDispatchToProps = dispatch => ({
    onClose: () => dispatch(setVisible('configurationVariantSelection', false)),
    onProceed: (itemIdentifier, show) => {
        dispatch(setVisible('optionlist', false));
        dispatch(setVisible('configurationVariantSelection', !show));
        dispatch(configuratorActions.fetchConfiguration(itemIdentifier));
    },
});

export default containerConnect(mapStateToProps, mapDispatchToProps);
