import { _decorator, Button, Component, EditBox, instantiate, Label, Node, ScrollView, UITransform, Vec2, Vec3 } from 'cc';
import { LayerMgr } from '../../script/Manager/LayerMgr';
import { allMapList, getAllMapKeys, getOneTypeImgKeyList, imgTypeList, MapData, MapItemData, SuperFind, UserMap } from '../../script/Manager/LocalDataMgr';
import { MapItem } from './MapItem';
const { ccclass, property } = _decorator;

@ccclass('SelectMapPanel')
export class SelectMapPanel extends Component {
@property(Node)
    itemRoot: Node = null;
    @property(Node)
    itemPrefab: Node = null;
    @property(Button)
    btnClose: Button = null;
    @property(ScrollView)
    scrollView:ScrollView = null;
    @property(EditBox)
    editBox:EditBox = null;
    @property(Button)
    btnTurn:Button = null;
    @property(Button)
    btnAll:Button = null;
    @property(Node)
    btnsMoreContent:Node = null;
    @property(Node)
    selectTypeBtns:Node = null
    _mapData:MapData = null
    _allMapList:{ [key: number]: MapItemData };
    _items: Node[] = [];
    _hasCreatedItems:boolean = false;
    protected start(): void {
        this.btnClose.node.on(Node.EventType.TOUCH_END,this.onBtnCloseClick,this)
        this.btnTurn.node.on(Node.EventType.TOUCH_END,this.scrollToItem,this)
        this.btnAll.node.on(Node.EventType.TOUCH_END,this.onBtnAllClick,this)
    }

    init(mapList:number[] = null) {
        if(this._hasCreatedItems) return;
        this._hasCreatedItems = true;
        this._allMapList = allMapList
        this._mapData = UserMap.getMapData()
        let allMapKeys = mapList? mapList : getAllMapKeys()
        let count = allMapKeys.length;
        for (let i = 0; i < count; i++) {
            this.createItem(allMapKeys[i]);
        }
    }

    onBtnCloseClick()
    {
        this.node.active = false
    }

    createItem(key: number) {
        let itemNode = instantiate(this.itemPrefab);
        itemNode.parent = this.itemRoot;
        this._items.push(itemNode);
        itemNode.active = true
        let mapItem = itemNode.getComponent(MapItem)
        mapItem.init(key,this.judgeSelect(key))
    }

    judgeSelect(key)
    {
        let selMaps = UserMap.getMapData().selectedMaps
        let index = selMaps.indexOf(key)
        console.log("key",key,"存在",index !== -1)
        return index !== -1
    }


    clearSelectAllMaps()
    {
        UserMap.removeAllSelectMap()
        this.refreshMapSelectioin()
    }

    refreshMapSelectioin()
    {
        let allMapKeys = getAllMapKeys()
        let count = allMapKeys.length;
        for(let i = 0; i < count; i++){
            let item = this._items[i]
            item.getComponent(MapItem).setSelectMap(false)
        }
    }

    slideToBottom()
    {   
        this.scrollView.scrollToBottom()
    }

    selectAllMap()
    {
        UserMap.addAllSelectMap()
        this._items.forEach((item)=>{
            item.getComponent(MapItem).setSelectMap(true)
        })
    }

    scrollToItem() {
        let page = parseInt(this.editBox.string);
        if (isNaN(page)) return;
        let itemNode = this.itemRoot.children[page];
        if (!itemNode) return;

        const viewHeight = this.scrollView.node.getComponent(UITransform).height;
        const itemHeight = itemNode.getComponent(UITransform).height;

        // 获取itemNode在content中的位置（局部坐标）
        const itemPos = itemNode.position;
        const itemTop = -itemPos.y;
        // 使item在视图中居中需要滚动的偏移量（从content顶部到视图顶部的距离）
        let offset = itemTop - (viewHeight - itemHeight) / 2;

        // 获取内容总高度（content节点的高度）
        const contentHeight = this.itemRoot.getComponent(UITransform).height;
        // 最大可滚动的偏移量
        const maxScrollOffset = Math.max(0, contentHeight - viewHeight);
        // 限制offset在[0, maxScrollOffset]之间
        offset = Math.max(0, Math.min(maxScrollOffset, offset));

        // 滚动到该偏移量
        this.scrollView.scrollToOffset(new Vec2(0, offset), 0.5);
    }

    reset(type:string)
    {
        this.clearItems()
        let mapList = getOneTypeImgKeyList(type)
        this.init(mapList)
    }

    clearItems()
    {
        this._items.forEach((item)=>{
            item.destroy()
        })
        this._items = []
        this._hasCreatedItems = false
    }

    onBtnAllClick()
    {
        this.selectTypeBtns.active = true
        this.appearMoreBtns()
    }

    typeBtns:Node[] = []
    appearMoreBtns()
    {
        if(this.typeBtns.length > 0) 
        {
            this.selectTypeBtns.active = true
            return
        }
        let count = imgTypeList.length
        for(let i = 0; i < count; i++){
            let itemNode = instantiate(this.btnAll.node);
            itemNode.parent = this.btnsMoreContent;
            itemNode.setPosition(0,0,0)
            itemNode.getComponentInChildren(Label).string = imgTypeList[i]
            this.typeBtns.push(itemNode)
        }
        this.typeBtns.forEach((item)=>{
            item.on(Node.EventType.TOUCH_END,this.onBtnTypeClick,this)
        })
    }

    onBtnTypeClick(event: Event) {
        let item = event.target as unknown as Node
        let type = item.getComponentInChildren(Label).string
        this.reset(type)
        this.selectTypeBtns.active = false
    }
}