import { Services } from '../ServiceLocator';
import { EventTypes } from 'App/Constant';
import { t } from '../../Framework/i18n';
import { isDesignerMode } from '../Reducers/ConfigurationMode/Selectors';
import filter from 'lodash/filter';
import map from 'lodash/map';

export const actionsToTrack = {
    /***************************\
    *                           *
    * Header Section *
    *                           *
    \***************************/
    [EventTypes.load]: action => ({
        event: action.type,
    }),
    [EventTypes.save]: action => ({
        event: action.type,
    }),
    [EventTypes.save]: action => ({
        event: action.type,
    }),
    [EventTypes.mail]: action => ({
        event: action.type,
    }),
    [EventTypes.load_request]: action => ({
        event: action.type,
        configuration_code: action.data,
    }),
    [EventTypes.change_variant]: action => ({
        event: action.type,
        selected_variant_identifier: action.data.key,
    }),

    /***************************\
    *                           *
    * Preview *
    *                           *
    \***************************/
    [EventTypes.preview_open]: action => ({
        event: action.type,
    }),
    [EventTypes.preview_close]: action => ({
        event: action.type,
    }),

    /***************************\
    *                           *
    * Add Text*
    *                           *
    \***************************/
    [EventTypes.add_text]: action => ({
        event: action.type,
    }),

    /***************************\
    *                           *
    * Add Image *
    *                           *
    \***************************/
    [EventTypes.add_image]: action => ({
        event: action.type,
    }),
    [EventTypes.uploaded_file_type]: action => ({
        event: action.type,
        file_type: action.data.type,
    }),

    /***************************\
     *                           *
     * Edit Image *
     *                           *
     \***************************/
    [EventTypes.edit_image]: action => ({
        event: action.type,
    }),
    [EventTypes.image_colorize]: action => ({
        event: action.type,
        selected_image_edit_colorize: action.data,
    }),
    [EventTypes.image_edit_colorize_color]: action => ({
        event: action.type,
        selected_color: action.data,
    }),
    [EventTypes.image_edit_colorize_found_colors]: action => ({
        event: action.type,
        color_amount: action.data,
    }),
    [EventTypes.image_background]: action => ({
        event: action.type,
        image_edit_operation: t(
            'fileUpload.' +
                ({
                    replace: 'removeBackgroundEverywhere',
                    flood: 'removeBackgroundFromBorder',
                }[action.data] || 'notRemoveBackground')
        ),
    }),
    [EventTypes.image_edit_options]: action => ({
        event:
            action.data === 0
                ? 'image_edit_change_file'
                : action.data === 1
                ? 'image_edit_remove_background'
                : 'image_edit_colorize',
    }),

    /***************************\
     *                           *
     * Image Gallery*
     *                           *
     \***************************/
    [EventTypes.upload_new]: action => ({
        event: action.type,
    }),
    [EventTypes.image_thumbnail_select]: action => ({
        event: action.type,
        selected_image: action.data,
    }),

    /***************************\
    *                           *
    * Text Controls*
    *                           *
    \***************************/
    [EventTypes.text_bold]: action => ({
        event: action.type,
    }),
    [EventTypes.text_font]: action => ({
        event: action.type,
        selected_font_name: action.data.key,
    }),
    [EventTypes.text_italic]: action => ({
        event: action.type,
    }),
    [EventTypes.text_align_left]: action => ({
        event: action.type,
    }),
    [EventTypes.text_align_center]: action => ({
        event: action.type,
    }),
    [EventTypes.text_align_right]: action => ({
        event: action.type,
    }),
    [EventTypes.text_align_justify]: action => ({
        event: action.type,
    }),

    /***************************\
   *                           *
   * Color Palette*
   *                           *
   \***************************/
    [EventTypes.text_color]: action => ({
        event: action.type,
        selected_color: action.data,
    }),

    /***************************\
    *                           *
    * Object Controls*
    *                           *
    \***************************/
    [EventTypes.align_horizontal_center]: action => ({
        event: action.type,
    }),
    [EventTypes.align_vertical_center]: action => ({
        event: action.type,
    }),
    [EventTypes.align_move_down]: action => ({
        event: action.type,
    }),
    [EventTypes.align_move_up]: action => ({
        event: action.type,
    }),

    /***************************\
    *                           *
    * Designer and Configuration Summary*
    *                           *
    \***************************/
    [EventTypes.add_to_cart]: (action, state) => {
        const {
            configurationMode: { selectedMode },
        } = state;
        const event = isDesignerMode(selectedMode)
            ? EventTypes.add_to_cart
            : EventTypes.configuration_add_to_cart;
        return {
            event,
            selected_amounts: state.configurator.configuration.customdata.selectedAmounts,
        };
    },

    [EventTypes.selected_amounts]: (action, state) => {
        const {
            configurationMode: { selectedMode },
        } = state;
        const event = isDesignerMode(selectedMode)
            ? EventTypes.selected_amounts
            : EventTypes.configuration_selected_amounts;
        return {
            event,
            selected_amounts: state.configurator.configuration.customdata.selectedAmounts,
            selected_design_areas: getSelectedDesignAreas(state),
            selected_design_production_methods: getSelectedDesignProductionMethods(state),
            selected_options: getSelectedOptions(state),
        };
    },

    /***************************\
    *                           *
    * Design Area*
    *                           *
    \***************************/
    [EventTypes.design_area_switch]: (action, state) => ({
        event: action.type,
        selected_design_area_identifier: state.designArea.selectedDesignArea.identifier,
    }),

    /***************************\
    *                           *
    * Design Production*
    *                           *
    \***************************/
    [EventTypes.design_production_switch]: action => ({
        event: action.type,
        selected_design_production_method_identifier: action.data.key,
    }),

    /***************************\
    *                           *
    * Calculation Widget*
    *                           *
    \***************************/
    [EventTypes.widget_print_view]: action => ({
        event: action.type,
    }),
    [EventTypes.widget_open_configurator]: (action, state) => ({
        event: action.type,
        selected_design_areas: getSelectedDesignAreas(state),
        selected_design_production_methods: getSelectedDesignProductionMethods(state),
        selected_options: getSelectedWidgetConfigurationOptions(state),
        selected_amount: state.configurator.configuration.customdata.selectedAmounts,
    }),
    [EventTypes.widget_change_amount]: (action, state) => ({
        event: action.type,
        selected_amounts: state.configurator.configuration.customdata.selectedAmounts,
    }),
    [EventTypes.widget_add_design_area]: action => ({
        event: action.type,
        selected_design_area_identifier: action.data,
    }),
    [EventTypes.widget_remove_design_area]: action => ({
        event: action.type,
        removed_design_area_identifier: action.data,
    }),
    [EventTypes.widget_change_design_production_method]: action => ({
        event: action.type,
        selected_design_production_method_identifier: action.data.key,
    }),

    /***************************\
    *                           *
    * OnLoad*
    *                           *
    \***************************/
    [EventTypes.load_item]: action => ({
        event: action.type,
        item_identifier: action.data,
    }),

    /***************************\
    *                           *
    * Component and Option Selection*
    *                           *
    \***************************/
    [EventTypes.switch_option]: action => ({
        event: action.type,
        selected_component: action.data.component,
        selected_option: action.data.option,
    }),

    [EventTypes.select_component]: action => ({
        event: action.type,
        selected_component: action.data,
    }),

    /***************************\
    *                           *
    * Mode Switch*
    *                           *
    \***************************/
    [EventTypes.configuration_mode_switch]: action => ({
        event: action.type,
        switch_from: action.data === 'designer' ? 'creator' : 'designer',
        switch_to: action.data,
    }),
};

const getSelectedWidgetConfigurationOptions = state => {
    let confoptions = [];
    const calculationObj = state.configurator.calculation.positions;
    for (let confoption in calculationObj) {
        if (calculationObj[confoption].selectableByUser && calculationObj[confoption].selected) {
            confoptions.push(calculationObj[confoption].title);
        }
    }
    return confoptions;
};
const getSelectedDesignAreas = state => {
    let designAreas = [];
    const designData = state.configurator.configuration.designdata;
    for (let design in designData) {
        const canvasData = designData[design].canvasData;
        if (canvasData && canvasData.objects.length > 0) {
            designAreas.push(design);
        }
    }
    return designAreas;
};
const getSelectedDesignProductionMethods = state => {
    let designProductionMethods = [];
    const designData = state.configurator.configuration.designdata;
    for (let designProduction in designData) {
        const canvasData = designData[designProduction].canvasData;
        if (canvasData && canvasData.objects.length > 0) {
            designProductionMethods.push(designData[designProduction].designProductionMethodIdentifier);
        }
    }
    return designProductionMethods;
};

const getSelectedOptions = state => {
    const {
        configurator: { configuration },
    } = state;
    const { optionclassifications } = configuration;
    const options = [];
    const componentsWithSelectedOptions = filter(
        optionclassifications,
        oc => oc.selectedoptions && oc.selectedoptions.length > 0
    );
    componentsWithSelectedOptions.forEach(component => {
        const selectedComponentMap = {};
        selectedComponentMap[component.identifier] = map(component.selectedoptions, option => ({
            identifier: option.identifier,
            amount: option.amount,
        }));
        options.push(selectedComponentMap);
    });
    return options;
};

export default class AnalyticsService {
    static serviceName = 'AnalyticsService';

    EventTypes = EventTypes;

    setDataLayer(dataLayer) {
        this.dataLayer = dataLayer;
        const loadIdentifier = Services.configurator.state.loadIdentifier;
        loadIdentifier && this.triggerEvent(EventTypes.load_item, Services.configurator.state.loadIdentifier);
    }

    getActionsToTrack() {
        return actionsToTrack;
    }

    triggerEvent(type, data = {}) {
        const actionsToTrack = this.getActionsToTrack();
        if (type && actionsToTrack[type]) {
            const gaData = actionsToTrack[type]({ type, data }, Services.store.state);
            this.dataLayer && this.dataLayer.push(gaData);
        }
    }
}
