import { containerConnect } from 'Framework/ComponentContainer';
import createSelector from 'Utils/Function/createSelector';
import {
    getItem,
    getSelectedVariantIdentifier,
    showItemIdentifier,
} from 'App/Reducers/Configurator/Selectors';
import { Services } from 'App/ServiceLocator';
import { getConf } from 'App/configuration';
import Header from 'App/Shared/Components/Header';
import get from 'lodash/get';
import getImageUrl from '../../../Utils/getImageUrl';

const tools = [
    {
        key: 'save',
        identifier: 'cloud_download',
        title: 'headerMenu.save',
        function: () => Services.interaction.saveConfiguration(),
        enabled: getConf('availableTools.save'),
    },
    {
        key: 'load',
        identifier: 'cloud_upload',
        title: 'headerMenu.load',
        function: () => {
            Services.interaction.showLoadConfigurationDialog();
        },
        enabled: getConf('availableTools.load'),
    },
    {
        key: 'mail',
        identifier: 'mail',
        title: 'headerMenu.sendEmail',
        function: async () => {
            await Services.interaction.mailConfiguration();
            Services.interaction.showSendEmailDialog();
        },
        enabled: getConf('availableTools.share'),
    },
    {
        key: 'picture_as_pdf',
        identifier: 'picture_as_pdf',
        title: 'headerMenu.saveAsPdf',
        function: () => Services.interaction.printConfigurationAndOpenPdf(),
        enabled: getConf('availableTools.print'),
    },
];

const getItemGroupChildren = item => {
    const itemGroup = item.itemGroup;

    if (!itemGroup) {
        return [];
    }

    return itemGroup.children || [];
};

export const createPropsFromState = createSelector(
    getItem,
    getSelectedVariantIdentifier,
    showItemIdentifier,
    (item, selectedVariantIdentifier, showItemIdentifier) => {
        const variants = [];
        for (const groupChild of getItemGroupChildren(item)) {
            const children = groupChild.itemGroup ? groupChild.itemGroup.children : [];
            const childIdentifiers = children.map(child => child.identifier);
            variants.push({
                key: groupChild.identifier,
                sizes: childIdentifiers,
                title: groupChild.itemgroupentryTitle,
                value: groupChild.identifier,
                url: getImageUrl(groupChild.thumbnail),
            });
        }
        let selectedVariant = selectedVariantIdentifier;
        if (variants.length > 0 && get(variants[0], 'sizes', []).length > 0 && selectedVariantIdentifier) {
            variants.forEach(variant => {
                if (variant.sizes.find(size => size === selectedVariantIdentifier)) {
                    selectedVariant = variant.value;
                }
            });
        }
        return {
            selectedVariantIdentifier,
            variants,
            selectedVariant,
            title: item.title,
            showItemIdentifier,
        };
    }
);

const mapStateToProps = ({ configurator }) => {
    return {
        Component: Header,
        tools: tools.filter(tool => tool.enabled),
        ...createPropsFromState(configurator),
    };
};

const mapDispatchToProps = () => ({
    switchSelectedAmount: (oldIdentifier, newIdentifier) =>
        Services.configurator.switchSelectedAmount(oldIdentifier, newIdentifier),
});

export default containerConnect(mapStateToProps, mapDispatchToProps);
