import { containerConnect } from 'Framework/ComponentContainer';
import DesignAreaControlbox from '../Components/DesignAreaControlbox';
import { Services } from 'App/ServiceLocator';
import {
    getSelectedDesignAreaProperties,
    getDesignDataForFilteredDesignAreas,
    getColors,
    isColoringDisabled,
} from 'App/Reducers/DesignArea/Selectors';

const mapStateToProps = state => {
    const {
        filteredDesignAreas,
        maxColorAmount: maxColorAmountSource,
        designProductionMethod,
        selectedDesignArea,
    } = getSelectedDesignAreaProperties(state);
    const hasDesign = getDesignDataForFilteredDesignAreas(state);
    const colorAmount = getColors(state).length;
    const maxColorAmount = parseInt(maxColorAmountSource);
    return {
        Component: DesignAreaControlbox,
        designAreas: filteredDesignAreas || [],
        designedAreas: hasDesign || {},
        valueProductionMethod: designProductionMethod,
        valueDesignArea: selectedDesignArea,
        colorAmount,
        maxColorAmount,
        hasAmountIndicatorWarning: Boolean(maxColorAmount && colorAmount > maxColorAmount),
        colorDisabled: isColoringDisabled(state),
        handleChangeDesignArea: ({ target: { value } }) => Services.designData.selectDesignArea(value),
        handleChangeProductionMethod: ({ target: { value } }) => {
            Services.designData.setDesignProductionMethod(value);
        },
    };
};

export default containerConnect(mapStateToProps);
