import get from 'lodash/get';
import { getConfigurator, getItem, getSelectedVariantIdentifier } from '../Configurator/Selectors';
import { getSelectedDesignArea } from '../DesignArea/Selectors';
import { compareDesignAreasBySize } from './Transformers';
import { recalculateSingleDesignArea } from '../DesignArea/Transformers';
import { getSelectedConfigurationMode } from '../ConfigurationMode/Selectors';
import getImageUrl from '../../Utils/getImageUrl';

export const getThumbnailData = state => {
    const items = state.designView.designViews.map(designView => {
        const thumbnailImage = state.designView.viewThumbnailImages[designView.identifier];
        return {
            identifier: designView.identifier,
            ...(thumbnailImage && { thumbnailImage: getImageUrl(thumbnailImage) }),
        };
    });

    const dotMode = !items.every(item => item.thumbnailImage);
    const currentConfiguration = getSelectedConfigurationMode(state);

    // on designer, we fall back to the older thumbnail images, if they exist
    if (currentConfiguration === 'designer' && dotMode === true) {
        const configuratorState = getConfigurator(state);
        const itemIdentifier =
            getSelectedVariantIdentifier(configuratorState) || getItem(configuratorState).identifier;

        const designFallBackItems = state.designView.designViews.map(designView => {
            const thumbnailImage = get(designView.thumbnails, itemIdentifier);
            return {
                identifier: designView.identifier,
                ...(thumbnailImage && { thumbnailImage: getImageUrl(thumbnailImage) }),
            };
        });

        return {
            items: designFallBackItems,
            dotMode: !designFallBackItems.every(item => item.thumbnailImage),
        };
    }

    return {
        dotMode,
        items,
    };
};

export const get2DModelSrc = (state, host) => {
    const configuratorState = getConfigurator(state);
    const itemIdentifier =
        getSelectedVariantIdentifier(configuratorState) || getItem(configuratorState).identifier;

    const designArea = getSelectedDesignArea(state);

    const designView = (designArea && designArea.designView) || state.designView.selectedDesignView;

    const src = get(designView, `images.${itemIdentifier}`, null);

    return src ? `${host}${src}` : null;
};

export const getDesignViewLength = state => get(state.designView.designViews, 'length', 0);

export const getSelectedDesignViewIdentifier = state => state.designView.selectedDesignView.identifier;

/**
 * Returns the selected design view with the current design area data, or false if not selected
 * @param {{designView: {}, designArea: {}}} state
 * @return {*|{designAreas: *}|boolean}
 */
export const getCurrentDesignView = state => {
    const {
        designView: { selectedDesignView },
    } = state;
    if (!selectedDesignView || !selectedDesignView.identifier) {
        return false;
    }
    if (!selectedDesignView.designAreas) {
        return selectedDesignView;
    }
    return {
        ...selectedDesignView,
        designAreas: [
            ...selectedDesignView.designAreas.map(designArea =>
                recalculateSingleDesignArea(state, designArea)
            ),
        ].sort(compareDesignAreasBySize),
    };
};
