import { containerConnect } from '../../../../Framework/ComponentContainer';
import ConfigurationModeSwitch from '../Components/ConfigurationModeSwitch';
import { getConfigurationModeOptions } from '../../../Reducers/ConfigurationMode/Selectors';
import { selectConfigurationMode } from '../../../Reducers/ConfigurationMode/Actions';
import { getConf } from '../../../configuration';
import { Services } from '../../../ServiceLocator';

const mapStateToProps = state => {
    const configurationModeOptions = getConfigurationModeOptions(state);
    return {
        Component: ConfigurationModeSwitch,
        configurationModeOptions,
        screen: state.device.screen,
    };
};

const mapDispatchToProps = dispatch => ({
    onChange: async mode => {
        if (mode === 'designer' && getConf('validateBeforeCTA')) {
            await Services.configurator.validateConfiguration();
            if (Services.store.state.configurator.validation.success) {
                dispatch(selectConfigurationMode(mode));
            }
        } else {
            dispatch(selectConfigurationMode(mode));
        }
    },
});

export default containerConnect(mapStateToProps, mapDispatchToProps);
