import { Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, AfterViewChecked, Output, EventEmitter } from '@angular/core';
import { KstConfig } from './config/chat.config';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

import { LoginChat, Init } from './store/chat.actions/actions';
import { CharAuthorizeService } from './services/chat-authorize.service';
import { IChatState } from './store/reducers/chat.state';

import { User } from './store/entities/user';

import { ChatHelper } from './utils/chatHelper';
import { ChatMessage, PostMessage } from './store/entities';


@Component({
    // tslint:disable-next-line: component-selector
    selector: 'kst-chat',
    template: `
        <div class="chat-container" #container>
            <ul class="chats">
                <ng-container *ngFor="let item of messages">
                    <li [class.in]="item.u.username !== userName" [class.out]="item.u.username === userName">
                        <img class="avatar" alt="" [src]="getAvatar(item.u.username)">
                        <div class="message">
                            <span class="arrow"> </span>
                            <a href="javascript:;" (click)="clickUser(item.u.username)" class="name"> {{item.u.username}} </a>
                            <span class="datetime" [time]="item.ts" timeage> {{item.ts | date : 'HH:mm'}} </span>
                            <span class="body">
                                <!-- {{item | translateMessage}} -->
                                <span *ngIf="item.mentions && item.mentions.length" [innerHtml]="mentionsConvert(item.mentions)"></span>
                                <span *ngIf="(!item.mentions || item.mentions.length===0) && (!item.channels || item.channels.length===0)" [innerHtml]="convertEmoji(item | translateMessage)"></span>
                            </span>
                            <span class="body" *ngIf="!item.msg && item.attachments.length"> 
                                <ng-container *ngFor="let file of item.attachments"> 
                                    <kst-file-image *ngIf="file.image_url" [url]="file.image_url" [inChatServer]="!isAbsoluteUrl(file.image_url)"></kst-file-image>
                                    <kst-file-audio *ngIf="file.audio_url" [url]="file.audio_url" [inChatServer]="!isAbsoluteUrl(file.audio_url)"></kst-file-audio>
                                    <kst-file-video *ngIf="file.video_url" [url]="file.video_url" [inChatServer]="!isAbsoluteUrl(file.video_url)"></kst-file-video>
                                    <kst-file-other *ngIf="!file.image_url && !file.audio_url && !file.video_url" [url]="file.title_link" [title]="file.title" [inChatServer]="!isAbsoluteUrl(file.title_link)"></kst-file-other>
                                </ng-container>
                            </span>
                        </div>
                    </li>
                </ng-container>
            </ul>
            <div class="footer" *ngIf="channel">
                <kst-message-sender (onMessage)="onTouchMessage($event)" [channelId]="channel.id"></kst-message-sender>
            </div>
        </div>
    `
})
export class KstChatComponent implements OnInit, AfterViewInit, AfterViewChecked {


    @Input('user') user: User;
    @Input('channel') channelNameOrId: string;

    @ViewChild('container') container: ElementRef;
    // tslint:disable-next-line: no-output-on-prefix
    @Output('onMessage') onMessage = new EventEmitter<any>();
    // tslint:disable-next-line: no-output-on-prefix
    @Output('onClickUser') onClickUser = new EventEmitter<any>();

    // 初始状态
    chatState: Observable<IChatState>;
    userName: string;
    token: string;
    messages: ChatMessage[] = [];
    channel: any;

    constructor( 
        private _store: Store<IChatState>,
        private _authorizeService: CharAuthorizeService) {

        this.chatState = this._store.pipe(select((state: any) => {
            return  state[KstConfig.stateName].chat;
        }));

    }

    ngOnInit(): void {
        const self = this;

        this._store.dispatch(new Init(this.user));
        this.chatState.subscribe(data => {
            if (data.appUser) {
                self.userName = data.appUser.username;
                self.token = data.appUser.accessToken;
            }
            self.messages = self.getLastMessage(data.messages, 25);
            self.channel = data.channel;
        });
        if (self.user) {
            // 自动登陆            
            self._authorizeService.login(self.user.username, self.user.chatpwd, self.channelNameOrId);
        }
    }

    ngAfterViewInit(): void {
        setTimeout(() => {
            this.scrollToBottom();
        }, 800);
    }

    ngAfterViewChecked(): void {

    }

    onTouchMessage(event) {
        this.onMessage.emit(event);
    }

    scrollToBottom(): void {
        try {
            this.container.nativeElement.querySelector('.chats').scrollTop = this.container.nativeElement.querySelector('.chats').scrollHeight;
        } catch (err) { }
    }

    getAvatar(username: string) {
        return `${KstConfig.url}/avatar/${username}?_dc=0`;
    }

    convertEmoji(str: string) {

        return ChatHelper.convertMessage(str);
    }

    mentionsConvert(mentions: any[]) {
        return mentions.map(m => {
            return `<a class="mention-link" href="javascript:;">${m.username}</a>`;
        }).join('');
    }

    clickUser(username: string) {

        this.onClickUser.emit(username);
    }

    /**
     * 获取最近的指定数量的消息
     * @param count 
     */
    getLastMessage(msgs: ChatMessage[], count: number = 15) {
        return msgs.filter((m, i) => i >= msgs.length - count);
    }

    isAbsoluteUrl(url: string) {
        return url.startsWith('http://') || url.startsWith('https://') || url.startsWith('www.');
    }

}