import { LayoutUtil } from "./layout_utils"
import { ListViewItem } from "./ListViewItem";

export class ListViewTs {
    private scrollview: cc.ScrollView;
    private mask: cc.Mask;
    private content: cc.Node;
    private item_tpl: cc.Node;
    private item_pool: ListViewItem[];

    private dir: number;
    private width: number;
    private height: number;
    private original_width: number;
    private original_height: number;
    private gap_x: number;
    private gap_y: number;
    private padding_left: number;
    private padding_right: number;
    private padding_top: number;
    private padding_bottom: number;
    private item_anchorX: number;
    private item_anchorY: number;
    private row: number;
    private col: number;
    private item_width: number;
    private item_height: number;
    private content_width: number;
    private content_height: number;
    private item_class: string;
    private cb_host: any;
    private scroll_to_end_cb: () => void;
    private auto_scrolling: boolean;
    private packItems: PackItem[];
    private start_index: number;
    private stop_index: number;
    private _selected_index: number = -1;
    private renderDirty: boolean;
    private timer: number;

    constructor(params: ListViewParams) {
        this.scrollview = params.scrollview;
        this.mask = params.mask;
        this.content = params.content;
        this.item_tpl = params.item_tpl;
        this.item_tpl.active = false;
        this.item_width = this.item_tpl.width;
        this.item_height = this.item_tpl.height;
        this.dir = params.direction || ListViewDir.Vertical;
        this.width = params.width || this.scrollview.node.width;
        this.height = params.height || this.scrollview.node.height;
        this.gap_x = params.gap_x || 0;
        this.gap_y = params.gap_y || 0;
        this.padding_left = params.padding_left || 0;
        this.padding_right = params.padding_right || 0;
        this.padding_top = params.padding_top || 0;
        this.padding_bottom = params.padding_bottom || 0;
        this.item_anchorX = params.item_anchorX != null ? params.item_anchorX : 0;
        this.item_anchorY = params.item_anchorY != null ? params.item_anchorY : 1;
        this.row = params.row || 1;
        this.col = params.column || 1;
        this.cb_host = params.cb_host;
        this.scroll_to_end_cb = params.scroll_to_end_cb;
        this.item_class = params.item_class;
        this.auto_scrolling = params.auto_scrolling || false;
        this.item_pool = [];

        if (this.dir == ListViewDir.Vertical) {
            const content_width = (this.item_width + this.gap_x) * this.col - this.gap_x + this.padding_left + this.padding_right;
            if (content_width > this.width) {
                cc.log("content_width > width, resize listview to content_width,", this.width, "->", content_width);
                this.width = content_width;
            }
            this.set_content_size(this.width, 0);
        }
        else {
            const content_height = (this.item_height + this.gap_y) * this.row - this.gap_y + this.padding_top + this.padding_bottom;
            if (content_height > this.height) {
                cc.log("content_height > height, resize listview to content_height,", this.height, "->", content_height);
                this.height = content_height;
            }
            this.set_content_size(0, this.height);
        }
        this.original_width = this.width;
        this.original_height = this.height;
        this.mask.node.setContentSize(this.width, this.height);
        this.scrollview.node.setContentSize(this.width, this.height);
        this.scrollview.vertical = this.dir == ListViewDir.Vertical;
        this.scrollview.horizontal = this.dir == ListViewDir.Horizontal;
        this.scrollview.inertia = true;
        this.scrollview.node.on("scrolling", this.on_scrolling, this);
        this.scrollview.node.on("scroll-to-bottom", this.on_scroll_to_end, this);
        this.scrollview.node.on("scroll-to-right", this.on_scroll_to_end, this);
        this.scrollview.node.on(cc.Node.EventType.TOUCH_START, this.on_scroll_touch_start, this);
        this.scrollview.node.on(cc.Node.EventType.TOUCH_END, this.on_scroll_touch_end, this);
        this.scrollview.node.on(cc.Node.EventType.TOUCH_CANCEL, this.on_scroll_touch_cancel, this);
    }

    private _touchBeganPosition: cc.Vec2;
    private _touchEndPosition: cc.Vec2;
    private on_scroll_touch_start(event: cc.Event.EventTouch) {
        this._touchBeganPosition = cc.v2(event.touch.getLocation().x, event.touch.getLocation().y);
    }

    private on_scroll_touch_cancel(event: cc.Event.EventTouch) {
        this._touchEndPosition = event.touch.getLocation();
        this.handle_release_logic();
    }

    private on_scroll_touch_end(event: cc.Event.EventTouch) {
        this._touchEndPosition = event.touch.getLocation();
        this.handle_release_logic();
    }

    private handle_release_logic() {
        const touchPos = this._touchEndPosition;
        const moveOffset = this._touchBeganPosition.sub(this._touchEndPosition);
        const dragDirection = this.get_drag_direction(moveOffset);
        if (dragDirection != 0) {
            return;
        }
        if (!this.packItems || !this.packItems.length) {
            return;
        }
        //无滑动的情况下点击
        const touchPosInContent = this.content.convertToNodeSpaceAR(touchPos);
        for (let i = this.start_index; i <= this.stop_index; i++) {
            const packItem = this.packItems[i];
            if (packItem && packItem.item && packItem.item.node.getBoundingBox().contains(touchPosInContent)) {
                packItem.item.onTouchEnd(packItem.item.node.convertToNodeSpaceAR(touchPos), packItem.data, i);
                break;
            }
        }
    }

    private get_drag_direction(moveOffset: cc.Vec2) {
        if (this.dir === ListViewDir.Horizontal) {
            if (Math.abs(moveOffset.x) < 3) { return 0; }
            return (moveOffset.x > 0 ? 1 : -1);
        }
        else if (this.dir === ListViewDir.Vertical) {
            // 由于滚动 Y 轴的原点在在右上角所以应该是小于 0
            if (Math.abs(moveOffset.y) < 3) { return 0; }
            return (moveOffset.y < 0 ? 1 : -1);
        }
    }

    private on_scroll_to_end() {
        if (this.scroll_to_end_cb) {
            this.scroll_to_end_cb.call(this.cb_host);
        }
    }

    private last_content_pos: number;
    private on_scrolling() {
        let pos: number;
        let threshold: number;
        if (this.dir == ListViewDir.Vertical) {
            pos = this.content.y;
            threshold = this.item_height;
        }
        else {
            pos = this.content.x;
            threshold = this.item_width;
        }
        if (this.last_content_pos != null && Math.abs(pos - this.last_content_pos) < threshold) {
            return;
        }
        this.last_content_pos = pos;
        this.render();
    }

    private render() {
        if (!this.packItems || !this.packItems.length) {
            return;
        }
        if (this.dir == ListViewDir.Vertical) {
            let posy = this.content.y;
            // cc.log("onscrolling, content posy=", posy);
            if (posy < 0) {
                posy = 0;
            }
            else if (posy > this.content_height - this.height) {
                posy = this.content_height - this.height;
            }
            let viewport_start = -posy;
            let viewport_stop = viewport_start - this.height;
            // while(this.packItems[start].y - this.item_height > viewport_start)
            // {
            //     start++;
            // }
            // while(this.packItems[stop].y < viewport_stop)
            // {
            //     stop--;
            // }
            let start = this.indexFromOffset(viewport_start);
            let stop = this.indexFromOffset(viewport_stop);

            //expand viewport for better experience
            start = Math.max(start - this.col, 0);
            stop = Math.min(this.packItems.length - 1, stop + this.col);
            if (start != this.start_index) {
                this.start_index = start;
                this.renderDirty = true;
            }
            if (stop != this.stop_index) {
                this.stop_index = stop;
                this.renderDirty = true;
            }
        }
        else {
            let posx = this.content.x;
            // cc.log("onscrolling, content posx=", posx);
            if (posx > 0) {
                posx = 0;
            }
            else if (posx < this.width - this.content_width) {
                posx = this.width - this.content_width;
            }
            let viewport_start = -posx;
            let viewport_stop = viewport_start + this.width;
            // while(this.packItems[start].x + this.item_width < viewport_start)
            // {
            //     start++;
            // }
            // while(this.packItems[stop].x > viewport_stop)
            // {
            //     stop--;
            // }
            let start = this.indexFromOffset(viewport_start);
            let stop = this.indexFromOffset(viewport_stop);

            //expand viewport for better experience
            start = Math.max(start - this.row, 0);
            stop = Math.min(this.packItems.length - 1, stop + this.row);
            if (start != this.start_index) {
                this.start_index = start;
                this.renderDirty = true;
            }
            if (stop != this.stop_index) {
                this.stop_index = stop;
                this.renderDirty = true;
            }
        }
    }

    onUpdate() {
        if (this.renderDirty && cc.isValid(this.scrollview.node)) {
            cc.log("listView, render_from:", this.start_index, this.stop_index);
            this.render_items();
            this.renderDirty = false;
        }
    }

    //不支持多行多列
    private indexFromOffset(offset: number) {
        let low = 0;
        let high = 0;
        let max_idx = 0;
        high = max_idx = this.packItems.length - 1;
        if (this.dir == ListViewDir.Vertical) {
            while (high >= low) {
                const index = low + Math.floor((high - low) / 2);
                const itemStart = this.packItems[index].y;
                const itemStop = index < max_idx ? this.packItems[index + 1].y : -this.content_height;
                if (offset <= itemStart && offset >= itemStop) {
                    return index;
                }
                else if (offset > itemStart) {
                    high = index - 1;
                }
                else {
                    low = index + 1;
                }
            }
        }
        else {
            while (high >= low) {
                const index = low + Math.floor((high - low) / 2);
                const itemStart = this.packItems[index].x;
                const itemStop = index < max_idx ? this.packItems[index + 1].x : this.content_width;
                if (offset >= itemStart && offset <= itemStop) {
                    return index;
                }
                else if (offset > itemStart) {
                    low = index + 1;
                }
                else {
                    high = index - 1;
                }
            }
        }
        return -1;
    }

    select_data(data) {
        const idx = this.packItems.findIndex(item => item.data == data);
        if (idx != -1) {
            this.select_item(idx);
        }
    }

    select_item(index: number) {
        if (index == this._selected_index) {
            return;
        }
        if (this._selected_index != -1) {
            this.inner_select_item(this._selected_index, false);
        }
        this._selected_index = index;
        this.inner_select_item(index, true);
    }

    private inner_select_item(index: number, is_select: boolean) {
        let packItem: PackItem = this.packItems[index];
        if (!packItem) {
            cc.warn("inner_select_item index is out of range{", 0, this.packItems.length - 1, "}", index);
            return;
        }
        packItem.is_select = is_select;
        if (packItem.item) {
            packItem.item.onSetSelect(is_select, index);
            if (is_select) {
                packItem.item.onSelected(packItem.data, index);
            }
        }
    }

    private spawn_item(index: number): ListViewItem {
        let item: ListViewItem = this.item_pool.pop();
        if (!item) {
            item = cc.instantiate(this.item_tpl).getComponent(this.item_class) as ListViewItem;
            item.node.active = true;
            //仅仅改变父节点锚点，子元素位置不会随之变化
            // item.node.setAnchorPoint(this.item_anchorX, this.item_anchorY);
            LayoutUtil.set_pivot_smart(item.node, this.item_anchorX, this.item_anchorY);
            item.onInit();
            // cc.log("spawn_item", index);
        }
        item.node.parent = this.content;
        return item;
    }

    private recycle_item(packItem: PackItem) {
        const item = packItem.item;
        if (item && cc.isValid(item.node)) {
            item.onRecycle(packItem.data);
            item.node.removeFromParent();
            this.item_pool.push(item);
            packItem.item = null;
        }
    }

    private clear_items() {
        if (this.packItems) {
            this.packItems.forEach(packItem => {
                this.recycle_item(packItem);
            });
        }
    }

    private render_items() {
        let packItem: PackItem;
        for (let i = 0; i < this.start_index; i++) {
            packItem = this.packItems[i];
            if (packItem.item) {
                // cc.log("recycle_item", i);
                this.recycle_item(packItem);
            }
        }
        for (let i = this.packItems.length - 1; i > this.stop_index; i--) {
            packItem = this.packItems[i];
            if (packItem.item) {
                // cc.log("recycle_item", i);
                this.recycle_item(packItem);
            }
        }
        for (let i = this.start_index; i <= this.stop_index; i++) {
            packItem = this.packItems[i];
            if (!packItem.item) {
                // cc.log("render_item", i);
                packItem.item = this.spawn_item(i);
                packItem.item.onSetData(packItem.data, i);
                packItem.item.onSetSelect(packItem.is_select, i);
                if (packItem.is_select) {
                    packItem.item.onSelected(packItem.data, i);
                }
            }
            //列表添加与删除时item位置会变化，因此每次render_items都要执行
            // packItem.item.node.setPosition(packItem.x, packItem.y);
            packItem.item.setLeftTop(packItem.x, packItem.y);
        }
    }

    private pack_item(data: any): PackItem {
        return { x: 0, y: 0, data: data, item: null, is_select: false };
    }

    private layout_items(start: number) {
        // cc.log("layout_items, start=", start);
        for (let index = start, stop = this.packItems.length; index < stop; index++) {
            const packItem = this.packItems[index];
            if (this.dir == ListViewDir.Vertical) {
                [packItem.x, packItem.y] = LayoutUtil.vertical_layout(index, this.item_width, this.item_height, this.col, this.gap_x, this.gap_y, this.padding_left, this.padding_top);
            }
            else {
                [packItem.x, packItem.y] = LayoutUtil.horizontal_layout(index, this.item_width, this.item_height, this.row, this.gap_x, this.gap_y, this.padding_left, this.padding_top);
            }
        }
    }

    private adjust_content() {
        if (this.packItems.length <= 0) {
            this.set_content_size(0, 0);
            return;
        }
        const last_packItem = this.packItems[this.packItems.length - 1];
        if (this.dir == ListViewDir.Vertical) {
            const height = Math.max(this.height, this.item_height - last_packItem.y + this.padding_bottom);
            this.set_content_size(this.content_width, height);
        }
        else {
            const width = Math.max(this.width, last_packItem.x + this.item_width + this.padding_right);
            this.set_content_size(width, this.content_height);
        }
    }

    private set_content_size(width: number, height: number) {
        if (this.content_width != width) {
            this.content_width = width;
            this.content.width = width;
        }
        if (this.content_height != height) {
            this.content_height = height;
            this.content.height = height;
        }
        // cc.log("ListView, set_content_size", width, height, this.content.width, this.content.height);
    }

    set_viewport(width?: number, height?: number) {
        if (width == null) {
            width = this.width;
        }
        else if (width > this.content_width) {
            width = this.content_width;
        }

        if (height == null) {
            height = this.height;
        }
        else if (height > this.content_height) {
            height = this.content_height;
        }
        //设置遮罩区域尺寸
        this.width = width;
        this.height = height;
        this.mask.node.setContentSize(width, height);
        this.scrollview.node.setContentSize(width, height);
        this.render();
    }

    renderAll(value: boolean) {
        let width: number;
        let height: number;
        if (value) {
            width = this.content_width;
            height = this.content_height;
        }
        else {
            width = this.original_width;
            height = this.original_height;
        }
        this.set_viewport(width, height);
    }

    set_data(datas: any[]) {
        if (this.packItems) {
            this.clear_items();
            this.packItems.length = 0;
        }
        else {
            this.packItems = [];
        }
        datas.forEach(data => {
            let packItem = this.pack_item(data);
            this.packItems.push(packItem);
        });
        this.layout_items(0);
        this.adjust_content();
        this.start_index = -1;
        this.stop_index = -1;
        if (this.dir == ListViewDir.Vertical) {
            this.content.y = 0;
        }
        else {
            this.content.x = 0;
        }
        if (this.packItems.length > 0) {
            this.render();
        }
    }

    insert_data(index: number, ...datas: any[]) {
        if (datas.length == 0) {
            cc.log("nothing to insert");
            return;
        }
        if (!this.packItems) {
            this.packItems = [];
        }
        if (index < 0 || index > this.packItems.length) {
            cc.warn("insert_data, invalid index", index);
            return;
        }
        let is_append = index == this.packItems.length;
        let packItems: PackItem[] = [];
        datas.forEach(data => {
            let packItem = this.pack_item(data);
            packItems.push(packItem);
        });
        this.packItems.splice(index, 0, ...packItems);
        this.layout_items(index);
        this.adjust_content();
        this.start_index = -1;
        this.stop_index = -1;

        if (this.auto_scrolling && is_append) {
            this.scroll_to_end();
        }
        this.render();
    }

    remove_data(index: number, count: number = 1) {
        if (!this.packItems) {
            cc.log("call set_data before call this method");
            return;
        }
        if (index < 0 || index >= this.packItems.length) {
            cc.warn("remove_data, invalid index", index);
            return;
        }
        if (count < 1) {
            cc.log("nothing to remove");
            return;
        }
        let old_length = this.packItems.length;
        let del_items = this.packItems.splice(index, count);
        //回收node
        del_items.forEach(packItem => {
            this.recycle_item(packItem);
        });

        //重新排序index后面的
        if (index + count < old_length) {
            this.layout_items(index);
        }
        this.adjust_content();
        if (this.packItems.length > 0) {
            this.start_index = -1;
            this.stop_index = -1;
            this.render();
        }
    }

    append_data(...datas: any[]) {
        if (!this.packItems) {
            this.packItems = [];
        }
        this.insert_data(this.packItems.length, ...datas);
    }

    scroll_to(index: number, time = 0) {
        if (!this.packItems) {
            return;
        }
        const packItem = this.packItems[index];
        if (!packItem) {
            cc.log("scroll_to, index out of range");
            return;
        }
        if (this.dir == ListViewDir.Vertical) {
            const min_y = this.height - this.content_height;
            if (min_y >= 0) {
                cc.log("no need to scroll");
                return;
            }
            let y = packItem.y;
            if (y < min_y) {
                y = min_y;
                cc.log("content reach bottom");
            }
            const x = this.content.x;
            if (time == 0) {
                this.scrollview.setContentPosition(cc.v2(x, -y));
            }
            else {
                this.scrollview.scrollToOffset(cc.v2(x, -y), time);
            }
            this.render();
        }
        else {
            const max_x = this.content_width - this.width;
            if (max_x <= 0) {
                cc.log("no need to scroll");
                return;
            }
            let x = packItem.x;
            if (x > max_x) {
                x = max_x;
                cc.log("content reach right");
            }
            const y = this.content.y;
            if (time == 0) {
                this.scrollview.setContentPosition(cc.v2(-x, y));
            }
            else {
                this.scrollview.scrollToOffset(cc.v2(-x, y), time);
            }
            this.render();
        }
    }

    get_scroll_offset() {
        const offset = this.scrollview.getScrollOffset();
        if (this.dir == ListViewDir.Vertical) {
            return offset.y;
        }
        else {
            return offset.x;
        }
    }

    scroll_to_offset(value: number, time = 0) {
        if (this.dir == ListViewDir.Vertical) {
            const x = this.content.x;
            if (time == 0) {
                this.scrollview.setContentPosition(cc.v2(x, value));
            }
            else {
                this.scrollview.scrollToOffset(cc.v2(x, value), time);
            }
            this.render();
        }
        else {
            const y = this.content.y;
            if (time == 0) {
                this.scrollview.setContentPosition(cc.v2(value, y));
            }
            else {
                this.scrollview.scrollToOffset(cc.v2(value, y), time);
            }
            this.render();
        }
    }

    scroll_to_end() {
        if (this.dir == ListViewDir.Vertical) {
            this.scrollview.scrollToBottom();
        }
        else {
            this.scrollview.scrollToRight();
        }
    }

    refresh_item(index: number, data: any) {
        const packItem = this.get_pack_item(index);
        if (!packItem) {
            return;
        }
        const oldData = packItem.data;
        packItem.data = data;
        if (packItem.item) {
            packItem.item.onRecycle(oldData);
            packItem.item.onSetData(data, index);
        }
    }

    reload_item(index: number) {
        const packItem = this.get_pack_item(index);
        if (packItem && packItem.item) {
            packItem.item.onRecycle(packItem.data);
            packItem.item.onSetData(packItem.data, index);
        }
    }

    private get_pack_item(index: number) {
        if (!this.packItems) {
            cc.log("call set_data before call this method");
            return null;
        }
        if (index < 0 || index >= this.packItems.length) {
            cc.warn("get_pack_item, invalid index", index);
            return null;
        }
        return this.packItems[index];
    }

    get_item(index: number) {
        const packItem = this.get_pack_item(index);
        return packItem ? packItem.item : null;
    }

    get_data(index: number) {
        const packItem = this.get_pack_item(index);
        return packItem ? packItem.data : null;
    }

    find_item(predicate: (data: any) => boolean) {
        if (!this.packItems || !this.packItems.length) {
            cc.log("call set_data before call this method");
            return null;
        }
        for (let i = this.start_index; i <= this.stop_index; i++) {
            const packItem = this.packItems[i];
            if (predicate(packItem.data)) {
                return packItem.item;
            }
        }
        return null;
    }

    find_index(predicate: (data: any) => boolean) {
        if (!this.packItems || !this.packItems.length) {
            cc.log("call set_data before call this method");
            return -1;
        }
        return this.packItems.findIndex(packItem => {
            return predicate(packItem.data);
        });
    }

    get renderedItems() {
        const items: ListViewItem[] = [];
        for (let i = this.start_index; i <= this.stop_index; i++) {
            const packItem = this.packItems[i];
            if (packItem && packItem.item) {
                items.push(packItem.item);
            }
        }
        return items;
    }

    get length() {
        if (!this.packItems) {
            cc.log("call set_data before call this method");
            return 0;
        }
        return this.packItems.length;
    }

    destroy() {
        this.clear_items();
        this.item_pool.forEach(item => {
            item.onUnInit();
            item.node.destroy();
        });
        this.item_pool = null;
        this.packItems = null;

        this.renderDirty = null;

        if (cc.isValid(this.scrollview.node)) {
            this.scrollview.node.off("scrolling", this.on_scrolling, this);
            this.scrollview.node.off("scroll-to-bottom", this.on_scroll_to_end, this);
            this.scrollview.node.off("scroll-to-right", this.on_scroll_to_end, this);
            this.scrollview.node.off(cc.Node.EventType.TOUCH_START, this.on_scroll_touch_start, this);
            this.scrollview.node.off(cc.Node.EventType.TOUCH_END, this.on_scroll_touch_end, this);
            this.scrollview.node.off(cc.Node.EventType.TOUCH_CANCEL, this.on_scroll_touch_cancel, this);
        }
    }

    get selected_index(): number {
        return this._selected_index;
    }

    get selected_data(): any {
        let packItem: PackItem = this.packItems[this._selected_index];
        if (packItem) {
            return packItem.data;
        }
        return null;
    }

    set scrollable(value: boolean) {
        if (this.dir == ListViewDir.Vertical) {
            this.scrollview.vertical = value;
        }
        else {
            this.scrollview.horizontal = value;
        }
    }

    get startIndex() {
        return this.start_index;
    }

    get stopIndex() {
        return this.stop_index;
    }
}

export enum ListViewDir {
    Vertical = 1,
    Horizontal = 2,
}

export type ListViewParams = {
    scrollview: cc.ScrollView;
    mask: cc.Mask;
    content: cc.Node;
    item_tpl: cc.Node;
    item_class: string;   //item对应的类型
    direction?: ListViewDir;
    width?: number;
    height?: number;
    gap_x?: number;
    gap_y?: number;
    padding_left?: number;
    padding_right?: number;
    padding_top?: number;
    padding_bottom?: number;
    item_anchorX?: number;
    item_anchorY?: number;
    row?: number;                    //水平方向排版时，垂直方向上的行数
    column?: number;                 //垂直方向排版时，水平方向上的列数
    cb_host?: any;                   //回调函数host
    scroll_to_end_cb?: () => void;     //滚动到尽头的回调
    auto_scrolling?: boolean;        //append时自动滚动到尽头
}

type PackItem = {
    x: number;
    y: number;
    data: any;
    is_select: boolean;
    item: ListViewItem;
}