import m from "mithril"
import {BaseView} from "./base"

export enum ModalType {
    'MESSAGE',
    'ERROR'
}

export interface iModalView {
    title: string
    subtitle: string
    topposition: string
    width: string
    type: ModalType
}
export class ModalView extends BaseView implements iModalView{
    title:string
    subtitle:string
    topposition:string
    width:string
    type:ModalType
    
    constructor (vnode) {
        super()
        this.title = super.getattr(vnode, "title", "Modal")
        this.subtitle = super.getattr(vnode, "subtitle", "")
        this.topposition = super.getattr(vnode, "topposition", "10%")
        this.width = super.getattr(vnode, "width", 'max-content')
        this.type = super.getattr(vnode, 'type', ModalType.MESSAGE)
    }
    view (vnode) {
        return m("div.w3-modal", {style: {display:'block'}}, 
            m("div.w3-modal-content.w3-card-4", {style: {width: this.width, top: this.topposition}},
                [
                    m(modalHeader, {type: this.type},
                        [
                            m(title, this.title), 
                            (this.subtitle ? m(subtitle, this.subtitle) : null)
                        ]
                    ), 
                    m(modalContent, vnode.children)
                ]
            )
        )
    }
}

const title = {
    view: (vnode) => {
        return m("h1", vnode.children)
    }
}
const subtitle = {
    view: (vnode) => {
        return m("h3", vnode.children)
    }
}
const modalHeader = {
    view: (vnode) => {
        let color = ".w3-theme"
        if (vnode.attrs["type"] == ModalType.ERROR) {
            color = ".w3-red"
        }
        return m("header.w3-container" + color, vnode.children)
    }
}
const modalContent = {
    view: (vnode) => {
        return m("div.w3-container.w3-theme-l1", vnode.children)
    }
}