import Thorium , { View , Style , Components , Controller , UserInterface , Events , Mouse , Screen , Keyboard } from "thoriumjs";
import style from '../../../styles/dropzone.module.css';

import {Icon , IconInitOptions } from '../../elements/icon/icon';
import {Controls , ContolInitOptions} from '../../elements/controls/controls';
import {SubControls} from '../../elements/subcontrols/subcontrols';

// Header Sub Controls

// interface ISubControlElement{
//     title:string;
//     class:string;
//     action:()=>void;
// }

// class SubControlElement extends Components.Div<Controller>{
//     constructor(option:ISubControlElement){
//         super({
//             prop : {
//                 name : 'content'
//             },
//             childrens : [
//                 new Components.Button<Controller>({
//                     prop : {
//                         class : option.class
//                     }
//                 }),
//                 new Components.Text<Controller>({ text : option.title , style:null , name : 'title'})
//             ],
//             proto : {
//                 onMouseDown(){
//                     option.action();
//                 }
//             }
//         })
//     }
// }

// class SubControlContainer extends Components.Div<Controller>{

//     constructor(childrens:ISubControlElement[]){
//         super({
//             prop : {
//                 name : 'container',
//                 class : style.SubControlContainer
//             },
//             childrens : Array.from(childrens , (x:ISubControlElement,i) => {
//                 return new SubControlElement(x);
//             })
//         })
//     }

// }

// export class HeaderSubControls extends Components.Div<Controller>{
//     constructor(childrens:ISubControlElement[]){
//         super({
//             prop : {
//                 name : 'subcontrols',
//                 class : style.HeaderSubControls
//             },
//             childrens : [
//                 new Components.Button<Controller>({
//                     prop : {
//                         name : 'expend'
//                     }
//                 }),
//                 new SubControlContainer(childrens)
//             ],
//             proto : {

//             }
//         })
//     }
// }

// Header Controls

// interface IHeaderControlButton{
//     class:string;
//     action:(e:Event)=>void;
// }

// class HeaderControlButton extends Components.Button<Controller>{

//     constructor(properties:IHeaderControlButton){
//         super({
//             prop : {
//                 class : properties.class,
//                 name : 'control'
//             },
//             proto : {
//                 onMouseDown(e:Event){
//                     properties.action(e);
//                 }
//             }
//         })
//     }
// }

// export class HeaderControls extends Components.Div<Controller>{
//     constructor(controls:(IHeaderControlButton|HeaderSubControls)[]|null = null){
//         super({
//             prop : {
//                 name : 'headerControls',
//                 class : `header-controls ${style.HeaderControls}`
//             },
//             childrens : (controls ? Array.from(controls , (x:IHeaderControlButton|HeaderSubControls,i:number) => {
//                 if(x instanceof HeaderSubControls)return x;
//                 else return new HeaderControlButton(x);
//             }) : []),
//         })
//     }
// }

// Header Icon

export class HeaderIcon extends Icon{
    constructor(imageUrl:IconInitOptions,imageUrl_open:IconInitOptions){
        super({
            path : imageUrl.path,
            type : (imageUrl.type ? imageUrl.type : 'mask'),
            prop : {
                name : 'icon',
                ':open' : false,
                ...(imageUrl.prop ? imageUrl.prop : {})
            },
            proto : {
                onMutation : function(mutation){
                    const value = this.getAttribute(mutation.attributeName);
                    if(mutation.attributeName == 'open'){
                        if(value == 'true')this.setAttribute('style' , Style.Style.Css({
                            '--icon-url' : `url(${imageUrl_open.path})`
                        }));
                        if(value == 'false')this.setAttribute('style' , Style.Style.Css({
                            '--icon-url' : `url(${imageUrl.path})`
                        }));
                    }
                }
            }
        })
    }
}

// Drop Zone

export interface DropZoneInitOptions{
    /** dropzone title */
    title:string;
    /**  */
    prop?:Thorium.ElementInterface<Controller|any>["prop"];
    proto?:Thorium.ElementInterface<Controller|any>["proto"];
    /** dropzone content */
    content:UserInterface.ElementUI<Partial<Controller>>[],
    /** dropzone icon */
    icon?:IconInitOptions;
    /** dropzone icon when open */
    icon_open?:IconInitOptions;
    /** dropzone controls & subControls */
    controls?:(ContolInitOptions|SubControls)[];
    /** on dropZone header mouseDown callback */
    onHeaderMouseDown?:(event:Event)=>void;
}

/**
* ### DropDown
* - Description : DropDown components
* - Sample : 
* ```typescript
*   new DropDown([
*       {
*           name : '',
*           action : () => {
* 
*           }
*       },
*       ...
*   ])
* ```
 */
export class DropZone extends Components.Div<Controller>{
    constructor(options:DropZoneInitOptions){

        function open(element:Controller,event:Event){
            element.turnActive();
            element.context().children['content'].turnActive();
            element.context().setAttribute('open',`${element._active.Value}`);
        }

        super({
            prop : { 
                ...(options.prop ? options.prop : {}),
                class : `dropzone-container ${style.DropZone} ${options.prop && options.prop.class ? options.prop.class : ''} context` , 
                name : 'dropZone',
                ':open' : false,
            },
            childrens : [
                new Components.Div<Controller>({
                    prop : {
                        name : 'head'
                    },
                    childrens : [
                        // expend
                        new Components.Button<Controller>({
                            prop : {
                                name : 'expend'
                            },
                            proto : {
                                onMouseDown(event){
                                    return open(this,event);
                                }
                            }
                        }),
                        // icon
                        ...(options.icon ? [new HeaderIcon(options.icon,(options.icon_open ? options.icon_open : null))] : [] ),
                        // title
                        new Components.Button<Controller>({
                            prop : { name : 'title' , type : 'button' , class : `${style.Button}` },
                            childrens : [
                                new Components.Span<Controller>({ prop : {text : options.title}})
                            ],
                            proto : {
                                onMouseDown(event){
                                    this.parentNode.children['expend'].onMouseDown();
                                },
                            }
                        }),
                        ...('controls' in options ? [new Controls(options.controls)] : [])
                        // new HeaderControls(controls)
                        // // controls
                        // new Components.Container<Controller>({
                        //     prop : {
                        //         name : 'controls'
                        //     },Ò
                        //     childrens : (options.controls ? options.controls : [])
                        // })
                    ],
                    proto : {
                        onMouseDown(event:Event){
                            if(options.onHeaderMouseDown)options.onHeaderMouseDown(event);
                        }
                    }
                }),
                new Components.Container<Controller>({
                    prop : {
                        class : `dropzone-content ${style.ContentHidden}`,
                        name : 'content'
                    },
                    childrens : (options.content ? options.content : []),
                    proto : {
                        onActive(){
                            const contentHeight = Array.from(this.children , (e:Element , i:number) => {
                                return e.clientHeight;
                            }).reduce((a,b) => {
                                return a + b;
                            } , 0);
                            this.classList.add(style.ContentIdle);
                            this.style.height = `${contentHeight}px`;
                            setTimeout( () => {
                                this.style.height = "auto";
                            },300)
                        },
                        onUnActive(){
                            const contentHeight = Array.from(this.children , (e:Element , i:number) => {
                                return e.clientHeight;
                            }).reduce((a,b) => {
                                return a + b;
                            } , 0);
                            this.style.height = `${contentHeight}px`;
                            this.classList.remove(style.ContentIdle);
                            setTimeout( () => {
                                this.style.height = null;
                            },100)
                        }
                    }
                })
            ],
            proto:{
                ...(options.proto ? options.proto : {}),
                onMutation(mutation){
                    const value = this.getAttribute(mutation.attributeName);
                    this.children['head'].children['icon'].setAttribute('open',value);
                }
            }
        })
    }
}