import { containerConnect } from 'Framework/ComponentContainer';
import { designAreaAppliesMask, getCurrentCanvasSize } from 'App/Reducers/DesignArea/Selectors';
import { DefaultDesigner } from '../DesignerUI';
import { Services } from 'App/ServiceLocator';
import { getClientHighlightColor, visualizationModeCheck } from 'App/Reducers/Configurator/Selectors';
import { isFallbackVisualizationMode } from 'App/Reducers/Configurator/Selectors';

const mapStateToProps = state => {
    const canvasSize = getCurrentCanvasSize(state);
    const show = canvasSize.width > 0 && canvasSize.height > 0;
    const selectedColor = getClientHighlightColor(state);
    const enableHiding = visualizationModeCheck(state).is3D();
    const hasBorder = !designAreaAppliesMask(state);
    return {
        Component: DefaultDesigner,
        canvasSize,
        show,
        selectedColor,
        hasBorder,
        hideDesigner: enableHiding ? Services.designData.closeDesignAreaEditor : undefined,
        useCheckerBoardBackground: isFallbackVisualizationMode(state),
    };
};

export default containerConnect(mapStateToProps);
