import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import 'rxjs/add/operator/toPromise';
import { HelperService } from './svc.helper';


@Injectable()
export class BlockService {
    
    constructor(
        private http: HttpClient,
        private helper: HelperService
    ) { }


    getBlocks(): Promise<any> {
        let rowFill: number = 0;

        return this.http.get(this.helper.server + 'feed/get/block' + this.helper.credentials)
            .toPromise()
            .then(function(response: any) {
                return response.data.blocks.map(function(blocks, index) {               
                    return blocks.block;
                })
            })
    }


    getBlocksWithLayout(): Promise<any> {
        let rowFill: number = 0;

        return this.http.get(this.helper.server + 'feed/get/block' + this.helper.credentials)
            .toPromise()
            .then(function(response: any) {
                return response.data.blocks.map(function(blocks, index) { 
                    let returnObj   = {};
                    let classes     = ['size-12--palm'];
                    let shape       = [];
                    let blockName   = blocks.block.blockId;
                    let blockFill   = 0;


                    // Add size-classes based on name
                    // --------------------------------
                    let nameArray   = blockName.split('_');

                    switch(nameArray.length) {
                        case 4:
                            // 25% width, 25% height
                            classes.push('size-3');
                            shape.push('square');
                            blockFill = 1;
                            rowFill += blockFill;
                            break;

                        case 3:
                            // 50% width, 25% height
                            classes.push('size-6');
                            shape.push('rectangle');
                            blockFill = 2;
                            rowFill += blockFill;
                            break;

                        case 2:
                            // 50% full height
                            classes.push('size-6', 'size-8--lap');
                            shape.push('square');
                            blockFill = 4;
                            rowFill += blockFill;
                            break;

                        default:
                            // 50% full height
                            classes.push('size-6', 'size-8--lap');
                            shape.push('square');
                            blockFill = 4;
                            rowFill += blockFill;
                    }


                    // Special logic
                    // --------------------------------

                    // Reset fill value if it has reached 8
                    // And add a clear-class for desktop
                    //  ____  ____  ____  ____ 
                    //  | 1 | | 1 | | 1 | | 1 |
                    //  ____  ____  ____  ____ 
                    //  | 1 | | 1 | | 1 | | 1 |

                    if(rowFill > 8) {
                        rowFill = rowFill-8;

                        classes.push('clear-left--desk-and-up');
                    }
                    


                    // Set values for new object
                    returnObj['blockId']    = blockName;
                    returnObj['content']    = blocks.block.content;
                    returnObj['classes']    = classes;
                    returnObj['shape']      = shape;
                    returnObj['blockFill']  = blockFill;

                    return returnObj;
                });
            })
            .then(function(response) {
                // reshuffle array 
                console.log(response);

                let reshuffledBlocks    = response;
                let currentFillLevel    = 0;
                let previousFill        = 0;
                let blocksSinceNewRow   = 0;


                for(let i=0; reshuffledBlocks.length > i; i++) {
                    let block = reshuffledBlocks[i];

                    // Custom lap layout 
                    // TODO: Create rules for lap layout
                    // ---------------------------------------

                    if(block.blockFill === 4) {
                        block.classes.push('size-8--lap');
                    }

                    switch(i) {
                        case 1:
                            block.classes.push('size-4--lap');
                            break;
                        case 2:
                        case 3:
                            block.classes.push('size-4--lap clear-left--lap');
                            break;
                        case 4:
                            block.classes.push('size-12--lap');
                            break;
                        case 5:
                        case 6:
                            block.classes.push('size-6--lap');
                            break;

                    }




                    currentFillLevel += block.blockFill;

                    // Add clear to block if previous blocks added up to a row
                    // and current block is not a 4-block
                    if(previousFill === 2 && block.blockFill <= 2) {
                        block.classes.push('clear-left--desk-and-up');
                    }


                    // Pull out current block from array if it is at pos 5 and is larger than a 1x1
                    if(previousFill === 4 && block.blockFill > 2) {

                        block.classes.push('f-grid--last')

                        // Pull our current block from array
                        reshuffledBlocks.splice(i, 1);

                        // Add block at start of row
                        reshuffledBlocks.splice(i - blocksSinceNewRow, 0, block);
                    }

                    previousFill += block.blockFill;
                    blocksSinceNewRow++;

                    // reset fill level when a row has been filled with 8 blocks
                    if (currentFillLevel === 8) {
                        currentFillLevel = 0;
                        previousFill = 0;
                        blocksSinceNewRow = 0;
                    }
                }



                return reshuffledBlocks;
            })
    }

}