import { _decorator, Component, instantiate, Label, Node, Prefab, ScrollView, UITransform, Vec3 } from 'cc';
import { edit_scene } from './edit_scene';
import { scene_select_list } from './scene_select_list';
import { attributes_data, scene_item_data } from '../../data/data';
import { config } from '../config';
import { scroll_scene } from './scroll_scene';
import { tools } from '../tools';
import { cur_edit_scene } from './cur_edit_scene';
import { widget_item } from './widget_item';
import { ClientEvent } from '../clientEvent';
const { ccclass, property } = _decorator;

@ccclass('base_view')
export class base_view extends Component {
    @property(ScrollView) scroll_view:ScrollView = null;
    @property(Node) btn_left:Node = null;
    @property(Node) btn_right:Node = null;
    @property(Node) btn_up:Node = null;
    @property(Node) btn_down:Node = null;
    @property(Node) content:Node = null;
    @property(Node) temp_content:Node = null;
    @property(Node) btn_add_page:Node = null;
    @property(Node) btn_delete_page:Node = null;
    @property(Node) lab_cur_page:Node = null;
    @property(Prefab) widget_prefab:Prefab = null; 
    private m_edit_scene:edit_scene = null;
    private m_data:scene_item_data = null;
    private m_cur_page:number = 0;
    public initView(_edit_scene:edit_scene){
        this.m_edit_scene = _edit_scene;
        this.btn_add_page.on(Node.EventType.TOUCH_END,()=>{
            this.add_page()
        })
        this.btn_delete_page.on(Node.EventType.TOUCH_END,()=>{
            this.delete_page()
        })
        let data = this.m_edit_scene.getCurSelectScene()
        if(data!=null){
            this.m_data = data;
            this.init()
        }
        this.btn_down.on(Node.EventType.TOUCH_END,()=>{
            this.next_page()
        })
        this.btn_up.on(Node.EventType.TOUCH_END,()=>{
            this.up_page()
        })
        this.btn_left.on(Node.EventType.TOUCH_END,()=>{
            this.up_page()
        })
        this.btn_right.on(Node.EventType.TOUCH_END,()=>{
            this.next_page()
        })
        this.updatePageNumber()
        ClientEvent.on(config.Event.ChangeSelectPage,this.ChangeSelectPage,this)
    }

    protected onDestroy(): void {
        ClientEvent.off(config.Event.ChangeSelectPage,this.ChangeSelectPage,this)
    }

    ChangeSelectPage(page:number){
        if(page!=this.m_cur_page){
            this.m_cur_page = page
            this.updatePageNumber()  
        }
    }

    public getAtt(){

    }
    on_add_page(data:scene_item_data){
        this.m_data.page_list.push(data)
        this.addScenePage(data)
        this.updatePageNumber()
    }
    on_delete_page(){
        let view = this.getCurPageView()
        if(view!=null){
            view.removeFromParent()
        }
        this.updatePageNumber()
        this.up_page()
    }
    delete_page(){
        if(this.m_data.page_list.length<=0){
            return tools.showToast("当前无场景页删除！")
        }
        tools.show_dialog("是否确定删除当前的场景页",()=>{
            this.m_data.page_list.splice(this.m_cur_page,1)
            this.on_delete_page()
        })
   
    }
    add_page(){
        tools.add_scene_page(this.on_add_page.bind(this))
    }

    init(){
        if(this.m_data.page_list.length<=0||this.m_data.type===config.Scene_Type_List.single_screen){
            this.hideAllBtn()
        }else{
     
        }
        // console.log("this.m_data",this.m_data)
        if(this.m_data.type===config.Scene_Type_List.single_screen){
            this.btn_add_page.active  = false;
            this.btn_delete_page.active = false;
            this.lab_cur_page.active = false;
            this.m_data.is_full_screen = true;
            if(this.m_data.page_list.length<=0){
                let n_s = new scene_item_data("",config.Scene_Type_List.single_screen,true)
                this.m_data.page_list.push(n_s)
            }
            this.addScenePage(this.m_data.page_list[0])

        }else{
            this.hideAllBtn()
            this.btn_add_page.active  = true;
            this.btn_delete_page.active = true;
            this.lab_cur_page.active = true;
            if(this.m_data.type===config.Scene_Type_List.many_screen_switch_up_down){
                this.btn_down.active = true;
                this.btn_up.active = true;
            }else{
                this.btn_left.active = true;
                this.btn_right.active = true;
            }

            for (let index = 0; index < this.m_data.page_list.length; index++) {
                const data = this.m_data.page_list[index];
                this.addScenePage(data)
            }
        }



    }

    initWidgets(scene:scroll_scene,data:scene_item_data){
        for (let index = 0; index < data.page_widget_list.length; index++) {
            const widget_data = data.page_widget_list[index];
            let node = instantiate(this.widget_prefab)
            node.getComponent(widget_item).initWidgetByScene(widget_data,widget_data.att)
            scene.addWidget(node)
        }
    }

    up_page(){
        if(this.m_data.page_list.length<=0){
            tools.showToast("当前没有分页")
            return;
        }
        if((this.m_cur_page-1)<0){
            this.m_cur_page = this.m_data.page_list.length-1;
        }else{
            this.m_cur_page -=1;
        }
        this.updatePageNumber()
    }

    next_page(){
        if(this.m_data.page_list.length<=0){
            tools.showToast("当前没有分页")
            return;
        }
        if((this.m_cur_page+1)>=this.m_data.page_list.length){
            this.m_cur_page = 0;
        }else{
            this.m_cur_page +=1;
        }
        this.updatePageNumber()
    }

    public cur_page(){
        return this.m_cur_page
    }

    getCurPageData(){
        if(this.m_data.page_list.length<=0){
            return null;
        }
        return this.m_data.page_list[this.m_cur_page]
    }
    getCurPageView(){
        if(this.content.children.length<=0){
            return null;
        }
        return this.content.children[this.m_cur_page]
    }
    

    updatePageNumber(){
        this.lab_cur_page.getComponent(Label).string = `第${this.m_data.page_list.length>0?(this.m_cur_page+1):this.m_cur_page}页`
        this.updatePageView()
        this.m_edit_scene.cur_edit_scene_node.getComponent(cur_edit_scene).onClickScene() 

        if(this.m_data.type == config.Scene_Type_List.many_screen_switch_up_down) {
            if(this.m_data.page_list.length == 0) {
                this.btn_up.active = true
                this.btn_down.active = true
                return
            }
            this.btn_up.active = true
            this.btn_down.active = true
            if(this.m_cur_page==0) {
                this.btn_up.active = false
            } else if(this.m_cur_page >= this.m_data.page_list.length - 1) {
                this.btn_down.active = false
            }
            
        } else if(this.m_data.type == config.Scene_Type_List.many_screen_switch_left_right) {
            if(this.m_data.page_list.length == 0) {
                this.btn_left.active = true
                this.btn_right.active = true
                return
            }
            this.btn_left.active = true
            this.btn_right.active = true
            if(this.m_cur_page==0) {
                this.btn_left.active = false
            } else if(this.m_cur_page >= this.m_data.page_list.length - 1) {
                this.btn_right.active = false
            }
        }
    }

    updatePageView(){
        for (let index = 0; index < this.content.children.length; index++) {
            const page_scene = this.content.children[index];
            if(this.m_cur_page===index){
                page_scene.active = true;
            }else{
                page_scene.active = false;
            }
        }
        // this.content.position = new Vec3(this.content.position.x - )
    }

    addScenePage(page_data:scene_item_data){
        let node:Node = null;
        if(page_data.is_full_screen){
            node = instantiate(this.temp_content);
            // if(page_data.page_list.length<=0){
            //     let att = new attributes_data
            //     page_data.page_list[0]
            //     page_data.page_list[0].att.width = 1080;
            //     page_data.page_list[0].att.height = 1920;
            //     page_data.page_list[0].att.id = config.getNewId();
            //     page_data.page_list[0].att.type = config.attributes_type.scene;
            // }
            if(page_data.att==null){
                page_data.att = new attributes_data
                page_data.att.width = 1080;
                page_data.att.height = 1920;
                page_data.att.id = config.getNewId();
                page_data.att.type = config.attributes_type.scene;
            }
            if(page_data.page_list[0]!=null){
                if(page_data.page_list[0].att===null){
                    page_data.page_list[0].att = page_data.att;
                }
                // page_data.page_list[0] = page_data.att;
            }else{
                let n_scene_item = new scene_item_data(page_data.scene_diy_name,page_data.type,true);
                page_data.page_list.push(n_scene_item)
                page_data.page_list[0].att = page_data.att;
            }
            node.getComponent(scroll_scene).initFullView(page_data.att)
            node.parent = this.content;
        }else{
            node = instantiate(this.scroll_view.node);
            if(page_data.att==null){
                page_data.att = new attributes_data
                page_data.att.width = 1920;
                page_data.att.height = 1920;
                page_data.att.id = config.getNewId();
                page_data.att.type = config.attributes_type.scene;
            }
            node.getComponent(scroll_scene).initView(page_data.is_check_mask,page_data.att)
            node.parent = this.content;
        }
        node.getComponent(scroll_scene).setData(page_data)

        if(this.m_data.page_list.length>0){
            // let temp_data = this.m_data.page_list[this.m_cur_page];
            // console.log("page_data",page_data)
            this.initWidgets(node.getComponent(scroll_scene),page_data)
        }

        setTimeout(() => {
            this.m_edit_scene.cur_edit_scene_node.getComponent(cur_edit_scene).onClickScene() 
            node.getComponent(scroll_scene).setCallBack(()=>{
                this.m_edit_scene.cur_edit_scene_node.getComponent(cur_edit_scene).onClickScene()
            })
        }, 0);

    }

    hideAllBtn(){
        this.btn_down.active = false;
        this.btn_up.active = false;
        this.btn_left.active = false;
        this.btn_right.active = false;
    }

    public getContenView(){

    }

    public getData():scene_item_data{
        return this.m_data;
    }
}