import Utils from './Utils';
import _, { clone } from 'lodash';
import { store } from '../store';

export default new class {
    constructor() {
        this.store = [];
        this.redoStore = [];
        this.selectedChangeId = false;

        this.lockStoreAdding = false;
    }

    addToStore(data, type = 'default') {
        if (!data || this.lockStoreAdding) return;

        console.log('ADDED TO STORE!');
        this.redoStore = [];

        const storeData = _.cloneDeep({
            id: Utils.uuidv4(),
            time: Date.now(),
            data, type
        });

        this.store.push(storeData);
        this.selectedChangeId = storeData.id;
    }

    get isUndo() {
        return !!this.store.length && !this.lockStoreAdding;
    }

    get isRedo() {
        return !!this.redoStore.length && !this.lockStoreAdding;
    }

    get lastStore() {
        // let currentState = this.store.find(st => st.id == this.selectedChangeId);
        // if (!currentState || !this.selectedChangeId) {
        return this.store[this.store.length - 1];
        // }

        // return currentState;
    }

    get lastRedoStore() {
        // let currentState = this.redoStore.find(st => st.id == this.selectedChangeId);
        // if (!currentState || !this.selectedChangeId) {
        return this.redoStore[this.redoStore.length - 1];
        // }

        // return currentState;
    }

    undoControlChange() {
        const cr = store.state.editor.canvasRender;
        const allControllEvents = this.store.filter(st => ['control_moved', 'control_scaled'].includes(st.type));
        const lastControllPositionChanged = allControllEvents[allControllEvents.length - 1];
        const controlElement = cr.control_canvas.getObjects().find(o => o.xsprite.id == this.lastStore.data.id);

        if (controlElement) {
            let opts = {};
            if (lastControllPositionChanged) {
                opts = lastControllPositionChanged.data.opts;
            } else {
                const addedElement = this.store.find(st => st.type == 'add_timeline'
                    && st.data.id == this.lastStore.data.id);

                if (addedElement) {
                    opts = _.pick(addedElement.data.control,
                        ['scaleX', 'scaleY', 'width', 'height', 'left', 'top']
                    );
                } else {
                    console.error('Not found add event!');
                }
            }

            controlElement.set(opts);
            cr._movedEvent({ target: controlElement, _updateAll: true });

            cr.control_canvas.renderAll();
        } else {
            console.error('Control element not found...');
        }
    }

    async undo() {
        if (!this.isUndo) return;
        if (this.lastStore.id == this.selectedChangeId
            && !['add_timeline'].includes(this.lastStore.type)) {
            this.redoStore.push(_.cloneDeep(this.lastStore));
            this.store = this.store.filter(st => st.id != this.lastStore.id);

            return await this.undo();
        }

        this.lockStoreAdding = true;
        switch (this.lastStore.type) {
            case 'add_timeline': {
                if (this.selectedChangeId != this.lastStore.id) {
                    this.undoControlChange();
                } else {
                    await store.dispatch('deleteElementById', { elementId: this.lastStore.data.item.id });
                }

                break;
            }

            case 'control_moved':
            case 'control_scaled': {
                await this.undoControlChange();

                break;
            }
        }

        if (this.lastStore.type == 'add_timeline' && this.selectedChangeId != this.lastStore.id) {
            this.selectedChangeId = this.lastStore.id;
        } else {
            if(this.lastStore.type != 'add_timeline') {
                this.selectedChangeId = this.lastStore.id;
            }

            this.redoStore.push(_.cloneDeep(this.lastStore));
            this.store = this.store.filter(st => st.id != this.lastStore.id);
        }

        this.lockStoreAdding = false;
    }

    async redo() {
        if (!this.isRedo) return;

        if (this.lastRedoStore.id == this.selectedChangeId
            && !['add_timeline'].includes(this.lastRedoStore.type)) {
            this.store.push(_.cloneDeep(this.lastRedoStore));
            this.redoStore = this.redoStore.filter(st => st.id != this.lastRedoStore.id);

            return await this.redo();
        }

        this.lockStoreAdding = true;
        const cr = store.state.editor.canvasRender;

        switch (this.lastRedoStore.type) {
            case 'add_timeline': {
                const cloneItem = _.cloneDeep(this.lastRedoStore.data.item);
                store.state.timeline.data.push(_.cloneDeep({
                    ...this.lastRedoStore.data.stack,
                    items: [this.lastRedoStore.data.item]
                }));

                await store.dispatch('addFileToCanvas', cloneItem);

                if (cloneItem.filedata && /video/g.test(cloneItem.filedata.type))
                    store.dispatch('generateVideoThumbs', { item: cloneItem });
                break;
            }

            case 'control_moved':
            case 'control_scaled': {
                const key = this.lastRedoStore.type == 'control_moved' ? '_movedEvent' : '_scaledEvent';
                const controlElement = cr.control_canvas.getObjects().find(o => o.xsprite.id == this.lastRedoStore.data.id);
                if (controlElement) {
                    controlElement.set(this.lastRedoStore.data.opts);
                    cr[key]({ target: controlElement, _updateAll: true });

                    cr.control_canvas.renderAll();
                } else {
                    console.error('Control element not found...');
                }

                break;
            }
        }

        this.selectedChangeId = this.lastRedoStore.id;
        this.store.push(_.cloneDeep(this.lastRedoStore));
        this.redoStore = this.redoStore.filter(st => st.id != this.lastRedoStore.id);

        this.lockStoreAdding = false;
    }
}