/*
    yoho客服 im: 首页
    @author acgpiano
*/

'use strict';

import {
    time
} from './time';
import {
    tip
} from './tip';
import {
    RatingView,
    LeaveMSGView,
    OrderListView
} from './view';

require('../../home/jquery.upload');
var saveImage = require('../../home/save-image');

var socket = require('./socket-chat'),
    socketConf = require('./socket-config'),
    cmEntity = socketConf.conversationMessage;

const chatBox = $('#chat-window'),
    encryptedUid = $('#encrypteduid').val();

const append = (html) => {
    chatBox.append(html);
};


// 聊天调整footer位置
const resizeFooter = () => {
    let bottom = $('#chat-footer').height();

    chatBox.css('bottom', `${bottom}px`);
    chatBox[0].scrollTop = chatBox[0].scrollHeight;
};

const msgTypeMap = {
    1: 'text',
    2: 'picture',
    10: 'order'
};


var chat = {
    $chat: null,
    $chatWin: null,
    $netTip: null,

    msgArr: [],

    state: {
        lastMSGTime: ''
    },

    messageT: require('service/chat/msg.hbs'),

    // 初始化websocket
    init: function() {
        this.$chat = $('#chat-main-wrap');
        this.$header = this.$chat.find('.chat-header');
        this.$chatWin = this.$chat.find('#chat-window');
        this.$netTip = this.$chat.find('.connection-failed');

        // 组件
        this.leaveMSGView = new LeaveMSGView('#leave-msg');
        this.orderListView = new OrderListView('#order-list');
        this.ratingView = new RatingView('#chat-comment');

        const self = this;

        this.bindEvents();

        cmEntity.encryptedUid = encryptedUid;
        $.ajax({
            type: 'GET',
            url: '/service/userinfo',
        }).then(function(result) {
            // 获取用户信息
            cmEntity.userHead = result.head || cmEntity.userHead;
            self.fetchHistoryMsg(function() {
                self.bootSocket();
            });
        });
    },

    bootSocket: function() {
        const self = this;

        let actions = {
            onMessage: function(event) {
                let received = JSON.parse(event.data);
                console.log(received);

                // update 会话id
                cmEntity.conversationId = received.newConversationId > 0 ?
                    received.newConversationId : received.conversationId;

                // 处理消息
                self.handleReceiveMSG(received);
            },
            onOpen: $.noop,
            onClose: $.noop
        };

        let config = $.extend(socketConf, actions);

        socket.init(config);
    },

    /**
     *  method: 绑定事件
     */
    bindEvents: function() {
        var self = this;

        this.$chat
            .on('click.Rating.toggle', '[data-trigger=rating]', function() {
                self.ratingView.toggle();
            })
            .on('click.leaveMSG', '[data-trigger=leave-msg]', function() {
                self.leaveMSGView.trigger('show.LeaveMSGView');
            })
            .on('click.orderList', '[data-trigger=order-list]', function() {
                self.orderListView.trigger('show.OderListView');
            })
            .on('click.chat.switchServer', '[data-action=change-human]', function(){
                self.switchService('human');
            })
            .on('keydown.chat.sendText', '.text-in', function(event) {
                if (event.which === 13) {
                    let content = {
                        data: {
                            content: $.trim(event.target.value)
                        }
                    };

                    self.sendMSG(content);
                }
            });


        this.orderListView
            .on('selectOrder.OrderListView', function(event, data) {
                let msg = {
                    type: 'order',
                    data
                };

                self.sendMSG(msg);
            });

        window.addEventListener('online', function() {
            self._networkSick(false);
        });

        window.addEventListener('offline', function() {
            self._networkSick(true);
        });

        // TODO
    },

    /**
     *  method: 在聊天窗口上, 画出信息
     *  @param object msg
     *  {
     *      from: str //来源 ["customer", "robot", "employee", "system"]
     *      type: str //消息类型 see swtich msg.type
     *      data: object //消息数据
     *  }
     *
     *  测试数据:
         chat.sendMSG({
             type: 'order',
             data: {
                 data: '123123',
                 imgSrc: '123123123123',
                    orderCode: '123123123123',
                    cost: '123123123123',
                    createTime: '123123123123',
                    orderStatus: '123123123123'
                }
        })
     *
     */
    sendMSG: function(msg) {
        if (!msg || !msg.data) {
            return;
        }
        let data = msg.data;
        let uuid = Date.now();
        let arr;

        msg.type = msg.type || 'text';

        msg.uid = uuid;
        cmEntity.uuid = uuid;
        switch (msg.type) {
            case 'order':
                arr = [
                    '单号：', data.orderCode,
                    '金额: ', '￥' + data.cost,
                    '下单时间: ', data.createTime,
                    '状态: ', data.orderStatus
                ];

                cmEntity.message.type = 10;
                cmEntity.message.content = arr;
                break;
            case 'picture':
                cmEntity.message.content = data.content;
                cmEntity.message.type = 2;
                break;
            case 'text':
            default:
                cmEntity.message.type = 1;
                cmEntity.message.content = data.content;
        }


        // TODO 时间

        let $msg = this._drawMSG(msg);

        this.msgArr.push($msg);
        socket.send(JSON.stringify(cmEntity));

        return this;
    },

    /**
     *  处理 conversationMessage, 生成 渲染用的数据
     */
    buildViewData: function(cm) {
        var viewData = {};
        var message = cm.message;
        var allTypes = socketConf.recType;

        switch (cm.type) {
            case allTypes.CU_SEND:
                viewData.from = 'customer';
                break;
            case allTypes.CS_SEND:
                viewData.from = 'employee';
                break;
            case allTypes.ROBOT_SEND:
                viewData.from = 'rebot';
                break;

            default:
                return null;
        }

        switch (message.type) {
            case 1:
                viewData.type = msgTypeMap[1];
                viewData.data = {
                    content: message.content
                };

                break;
            case 2:
                viewData.type = msgTypeMap[2];
                viewData.data = {
                    content: message.content
                };

                break;
            case 10:
                viewData.type = msgTypeMap[10];
                viewData.data = {
                    orderCode: message.content[1],
                    cost: message.content[3],
                    createTime: message.content[5],
                    orderStatus: message.content[7],
                };

                break;

            default:
                return null;
        }

        return viewData;
    },

    /**
     *  处理 接收到的信息
     */
    handleReceiveMSG: function(rec) {
        var recType = rec.type,
            message = rec.message,
            msgType = message.type,
            allTypes = socketConf.recType;

        var uuid = rec.uuid;

        switch (recType) {

        }

        return this;
    },

    /**
     *  订单消息
     *  @param 【object|array] viewData 订单消息模版数据
     */
    _drawMSG: function(viewData) {
        let chatWin = this.$chatWin[0];
        let $html = $(this.messageT(viewData));

        $html.appendTo(this.$chatWin);
        chatWin.scrollTop = chatWin.scrollHeight;

        return $html;
    },

    /**
     *  method: 根据网络状态 处理动作
     *  @param {boolean} isSick
     */
    _networkSick: function(isSick) {
        this.$netTip.toggleClass('hide', !isSick);

        return this;
    },

    // 获取10条历史记录
    fetchHistoryMsg: function(cb) {
        const self = this;

        var data = {
            encryptedUid: encryptedUid,
        };

        $.ajax({
            type: 'GET',
            url: '/service/msghistory',
            data: data,
            success: function(result) {
                var arr = [];

                result.forEach(message => {
                    let data = self.buildViewData(message);

                    if (data) {
                        arr.push(data);
                    }
                });

                self._drawMSG(arr);
                cb();
            }
        });
    },

    /**
     *  method: 渲染头部
     *  @param {string} type ["robot", "human"]
     */
    renderHeader: function(type) {
        var header = {
            rebot: {
                title: '智能小YO',
                right: '<span data-action="change-human">人工客服</span>'
            },
            human: {
                title: '<i class="chat-status"></i><span>YOHO!客服</span>',
                right: '<span data-trigger="rating">评价</span>'
            },
            link: {
                title: '正在连接...',
                right: ''
            }
        };

        header = header[type];

        this.$header
            .find('.title').html(header.title).end()
            .find('.header-right').html(header.right);

        return this;
    },

    // 刚进入提示
    enterSuccess: function(message) {
        append(time(Date.now()).show());
        append(tip().offLine());
        append(tip(message.content).onLine());
    },

    // 连线人工客服
    linkSuccess: function(type, message) {
        var status = $('.chat-status'),
            name = $('.service-name'),
            comment = $('.chat-comment');

        if (type === 2 || type === 3) {
            status.css('background', '#85be4a');
            name.text('YOHO!客服');
            comment.css('display', 'inline-block');
            append(tip(message.content).onLine());
        } else {
            name.text('YOHO!客服');
        }
    },

    // 用户发消息
    handleCusMsg: function(rec, msgType, message) {
        // 消去状态
    },

    // 客服发消息
    handleCsMsg: function(rec, msgType, message) {
        let cfg = {
            style: 'recevied-msg',
            avatar: cmEntity.userHead,
        };

        if (msgType === 2) {
            cfg.type = 'picture';
            cfg.data = {
                src: message.content,
            };
        } else {
            cfg.type = 'text';
            cfg.data = {
                msg: message.content,
            };
        }
        this._drawMSG(cfg);
        resizeFooter();
    }
};

chat.init();

// 触发菜单
$('.menu-trigger').on('touchend', function() {
    let $menu = $('.menu');

    if ($menu.css('display') === 'none') {
        $menu.show();
        resizeFooter();
    } else {
        $menu.hide();
        resizeFooter();
    }

    $('.upload-img').upload({
        auto: true,
        fileType: 'image/*',
        uploadScript: '/api/upload/image',
        fileObjName: 'filename',
        fileSizeLimit: 5000000,
        height: '100%',
        width: '100%',
        multi: false,
        formData: {
            bucket: 'suggest'
        },
        onUploadComplete: function(file, data) {
            let url;

            data = saveImage.saveImage(data);
            url = data.imgList[0].imgRelUrl + '?imageView2/2/w/640/q/90';
            url = 'http://img11.static.yhbimg.com/suggest' + url;
            sendMsg(2, url);
        }
    });
    $('.uploadifive-button').css('position', 'absolute');
});


// 图片放大
$('#chat-window').on('click', '.chat-image', function() {
    let img = $(this),
        fake = $('.fake-img-wrap');

    fake.find('img').attr('src', img.attr('src'));
    fake.fadeIn();

    fake.on('click', function() {
        fake.fadeOut();
    });
});


window.$ = $;
window.chat = chat;