import { Component, render, h, createRef, VNode } from 'preact';
import { Cell, PROP_CONSTRUCTOR_NAME } from "../env";
import { findIntegerFactors, hex, isArray, rgb2bgr } from "../../util";
import { dumpRAM } from "../../emu";
import { current_project } from "../../../ide/ui";
// TODO: can't call methods from this end (e.g. Palette, Bitmap)
import * as bitmap from "../lib/bitmap";
import * as color from "../lib/color";
import * as scriptui from "../lib/scriptui";

const MAX_STRING_LEN = 100;
const DEFAULT_ASPECT = 1;

function sendInteraction(iobj: scriptui.Interactive, type: string, event: Event, xtraprops: {}) {
    let irec = iobj.$$interact;
    let ievent : scriptui.InteractEvent = {interactid: irec.interactid, type, ...xtraprops};
    if (event instanceof PointerEvent) {
        const canvas = event.target as HTMLCanvasElement;
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        const x = (event.clientX - rect.left) * scaleX;
        const y = (event.clientY - rect.top) * scaleY;
        ievent.x = Math.floor(x);
        ievent.y = Math.floor(y);
        // TODO: pressure, etc.
    } else {
        console.log("Unknown event type", event);
    }
    // TODO: add events to queue?
    current_project.updateDataItems([{
        key: scriptui.EVENT_KEY,
        value: ievent
    }]);
}

interface ColorComponentProps {
    rgbavalue: number;
}

class ColorComponent extends Component<ColorComponentProps> {
    render(virtualDom, containerNode, replaceNode) {
        let rgb = this.props.rgbavalue & 0xffffff;
        let bgr = rgb2bgr(rgb);
        var htmlcolor = `#${hex(bgr,6)}`;
        var textcolor = (rgb & 0x008000) ? '#222' : '#ddd';
        var printcolor = hex(rgb & 0xffffff, 6); // TODO: show index instead?
        return h('div', {
            class: 'scripting-item scripting-color',
            style: `background-color: ${htmlcolor}; color: ${textcolor}`,
            alt: htmlcolor, // TODO
        }, [
            //h('span', { }, printcolor )
        ]);
    }
}

interface BitmapComponentProps {
    bitmap: bitmap.BitmapType;
    width: number;
    height: number;
}

class BitmapComponent extends Component<BitmapComponentProps> {
    ref = createRef(); // TODO: can we use the ref?
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    imageData: ImageData;
    datau32: Uint32Array;
    pressed = false;

    constructor(props: BitmapComponentProps) {
        super(props);
    }
    render(virtualDom, containerNode, replaceNode) {
        let props = {
            class: 'scripting-item',
            ref: this.ref,
            width: this.props.width,
            height: this.props.height,
            style: this.props.bitmap.style
        }
        let obj : any = this.props.bitmap;
        if (scriptui.isInteractive(obj)) {
            return h('canvas', {
                onPointerMove: (e: PointerEvent) => {
                    sendInteraction(obj, 'move', e, { pressed: this.pressed });
                },
                onPointerDown: (e: PointerEvent) => {
                    this.pressed = true;
                    this.canvas.setPointerCapture(e.pointerId);
                    sendInteraction(obj, 'down', e, { pressed: true });
                },
                onPointerUp: (e: PointerEvent) => {
                    this.pressed = false;
                    sendInteraction(obj, 'up', e, { pressed: false });
                },
                onPointerOut: (e: PointerEvent) => {
                    this.pressed = false;
                    sendInteraction(obj, 'out', e, { pressed: false });
                },
                ...props
            });
        } else {
            return h('canvas', props);
        }
    }
    componentDidMount() {
        this.refresh();
    }
    componentWillUnmount() {
        this.canvas = null;
        this.imageData = null;
        this.datau32 = null;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        this.refresh();
    }
    prepare() {
        this.canvas = this.base as HTMLCanvasElement;
        this.ctx = this.canvas.getContext('2d');
        this.imageData = this.ctx.createImageData(this.canvas.width, this.canvas.height);
        this.datau32 = new Uint32Array(this.imageData.data.buffer);
    }
    refresh() {
        // preact can reuse this component but it can change shape :^P
        if (this.canvas !== this.base
            || this.imageData.width != this.props.width
            || this.imageData.height != this.props.height) {
            this.prepare();
        }
        this.updateCanvas(this.datau32, this.props.bitmap);
        this.ctx.putImageData(this.imageData, 0, 0);
    }
    updateCanvas(vdata: Uint32Array, bmp: bitmap.BitmapType) {
        if (bmp['palette']) {
            this.updateCanvasIndexed(vdata, bmp as bitmap.IndexedBitmap);
        }
        if (bmp['rgba']) {
            this.updateCanvasRGBA(vdata, bmp as bitmap.RGBABitmap);
        }
    }
    updateCanvasRGBA(vdata: Uint32Array, bmp: bitmap.RGBABitmap) {
        vdata.set(bmp.rgba);
    }
    updateCanvasIndexed(vdata: Uint32Array, bmp: bitmap.IndexedBitmap) {
        let pal = bmp.palette.colors;
        for (var i = 0; i < bmp.pixels.length; i++) {
            vdata[i] = pal[bmp.pixels[i]];
        }
    }
}

interface ObjectTreeComponentProps {
    name?: string;
    object: {} | [];
    objpath: string;
}

interface ObjectTreeComponentState {
    expanded: boolean;
}

class ObjectKeyValueComponent extends Component<ObjectTreeComponentProps, ObjectTreeComponentState> {
    render(virtualDom, containerNode, replaceNode) {
        let expandable = typeof this.props.object === 'object';
        let hdrclass = '';
        if (expandable) hdrclass = this.state.expanded ? 'tree-expanded' : 'tree-collapsed'
        let propName = this.props.name || null;
        return h('div', {
            class: 'tree-content',
            key: `${this.props.objpath}__tree`
        }, [
            h('div', {
                class: 'tree-header ' + hdrclass,
                onClick: expandable ? () => this.toggleExpand() : null
            }, [
                propName != null ? h('span', { class: 'tree-key' }, [ propName, expandable ]) : null,
                h('span', { class: 'tree-value scripting-item' }, [
                    getShortName(this.props.object)
                ])
            ]),
            this.state.expanded ? objectToContentsDiv(this.props.object, this.props.objpath) : null
        ]);
    }
    toggleExpand() {
        this.setState({ expanded: !this.state.expanded });
    }
}

function getShortName(object: any) {
    if (typeof object === 'object') {
        try {
            var s = object[PROP_CONSTRUCTOR_NAME] || Object.getPrototypeOf(object).constructor.name;
            if (object.length > 0) {
                s += `[${object.length}]`
            }
            return s;
        } catch (e) {
            console.log(e);
            return e + "";
        }
    } else {
        return primitiveToString(object);
    }
}

function primitiveToString(obj) {
    var text = "";
    // is it a function? call it first, if we are expanded
    // TODO: only call functions w/ signature
    if (obj && obj.$$ && typeof obj.$$ == 'function' && this._content != null) {
        obj = obj.$$();
    }
    // check null first
    if (obj == null) {
        text = obj + "";
        // primitive types
    } else if (typeof obj == 'number') {
        if (obj != (obj | 0)) text = obj.toString(); // must be a float
        else text = obj + "\t($" + hex(obj) + ")";
    } else if (typeof obj == 'string') {
        text = obj;
    } else {
        text = JSON.stringify(obj);
    }
    if (text.length > MAX_STRING_LEN)
        text = text.substring(0, MAX_STRING_LEN) + "...";
    return text;
}

function isIndexedBitmap(object): object is bitmap.IndexedBitmap {
    return object['bpp'] && object['pixels'] && object['palette'];
}
function isRGBABitmap(object): object is bitmap.RGBABitmap {
    return object['rgba'] instanceof Uint32Array;
}

function objectToChildren(object: any) : any[] {
    if (color.isPalette(object)) {
        return new color.Palette(object.colors).chromas();
    } else if (isArray(object)) {
        return Array.from(object);
    } else if (object != null) {
        return [ object ]
    } else {
        return [ ]
    }
}

function objectToChild(object: any, index: number) : any {
    if (color.isPalette(object)) {
        return color.from(object.colors[index]);
    } else if (isArray(object)) {
        return object[index];
    } else if (object != null) {
        return object
    } else {
        return null
    }
}

function objectToDiv(object: any, name: string, objpath: string): VNode<any> {
    // don't view any keys that start with "$"
    if (name && name.startsWith("$")) {
        // don't view any values that start with "$$"
        if (name.startsWith("$$")) return;
        // don't print if null or undefined
        if (object == null) return;
        // don't print key in any case
        name = null;
    }
    // TODO: limit # of items
    // TODO: detect table
    if (object == null) {
        return h('span', { }, object + "");
    } else if (object['uitype']) {
        let cons = UI_COMPONENTS[object['uitype']];
        if (!cons) throw new Error(`Unknown UI component type: ${object['uitype']}`);
        return h(cons, { iokey: objpath, uiobject: object });
    } else if (object['literaltext']) {
        return h("pre", { }, [ object['literaltext'] ]);
    } else if (isIndexedBitmap(object) || isRGBABitmap(object)) {
        return h(BitmapComponent, { bitmap: object, width: object.width, height: object.height });
    } else if (color.isChroma(object)) {
        return h(ColorComponent, { rgbavalue: color.rgb(object) });
    } else if (color.isPalette(object)) {
        // TODO?
        if (object.colors.length <= 256) {
            let children = [];
            let props = { class: '', key: `${objpath}__obj` };
            props.class += ' scripting-flex ';
            object.colors.forEach((val) => {
                children.push(h(ColorComponent, { rgbavalue: val }));
            })
            return h('div', props, children);
        } else {
            let {a,b} = findIntegerFactors(object.colors.length, 1, 1, DEFAULT_ASPECT);
            return objectToDiv({ rgba: object.colors, width: a, height: b }, name, objpath);
        }
    } else {
        return h(ObjectKeyValueComponent, { name, object, objpath }, []);
    }
}

function fixedArrayToDiv(tyarr: Array<number>, bpel: number, objpath: string) {
    const maxBytes = 0x100;
    if (tyarr.length <= maxBytes) {
        // TODO
        let dumptext = dumpRAM(tyarr, 0, tyarr.length);
        return h('pre', {}, dumptext);
    } else {
        let children = [];
        for (var ofs = 0; ofs < tyarr.length; ofs += maxBytes) {
            children.push(objectToDiv(tyarr.slice(ofs, ofs + maxBytes), '$' + hex(ofs), `${objpath}.${ofs}`));
        }
        return h('div', {}, children);
    }
}

function objectToContentsDiv(object: {} | [], objpath: string) {
    // is typed array?
    let bpel = object['BYTES_PER_ELEMENT'];
    if (typeof bpel === 'number') {
        return fixedArrayToDiv(object as Array<number>, bpel, objpath);
    }
    let objectEntries = Object.entries(object);
    let objectDivs = objectEntries.map(entry => objectToDiv(entry[1], entry[0], `${objpath}.${entry[1]}`));
    return h('div', { class: 'scripting-flex' }, objectDivs);
}

///

interface UIComponentProps {
    iokey: string;
    uiobject: scriptui.ScriptUIType;
    dropdown?: boolean;
}

class UISliderComponent extends Component<UIComponentProps> {
    render(virtualDom, containerNode, replaceNode) {
        let slider = this.props.uiobject as scriptui.ScriptUISliderType;
        return h('div', {}, [
            this.props.iokey,
            h('input', {
                type: 'range',
                min: slider.min / slider.step,
                max: slider.max / slider.step,
                value: slider.value / slider.step,
                onInput: (ev) => {
                    let target = ev.target as HTMLInputElement; // TODO
                    let newUIValue = { value: parseFloat(target.value) * slider.step };
                    this.setState(this.state);
                    current_project.updateDataItems([{key: this.props.iokey, value: newUIValue}]);
                }
            }),
            h('span', { }, getShortName(slider.value)),
        ]);
    }
}

class UISelectComponent extends Component<UIComponentProps, ObjectTreeComponentState> {
    ref = createRef();
    render(virtualDom, containerNode, replaceNode) {
        let select = this.props.uiobject as scriptui.ScriptUISelectType<any>;
        let children = objectToChildren(select.options);
        this.props.dropdown = children.length > 16;
        let showselections = !this.props.dropdown || this.state.expanded;
        let seldiv = null;
        if (showselections) {
            seldiv = h('div', {
                class: 'scripting-select scripting-flex',
                ref: this.ref,
                onClick: (e) => {
                    // select object -- iterate parents until we find select div, then find index of child
                    let target = e.target as HTMLElement;
                    while (target.parentElement && target.parentElement != this.ref.current) {
                        target = target.parentElement;
                    }
                    if (target.parentElement) {
                        const selindex = Array.from(target.parentElement.children).indexOf(target);
                        if (selindex >= 0 && selindex < children.length) {
                            let newUIValue = { value: children[selindex], index: selindex };
                            this.setState({ expanded: false });
                            current_project.updateDataItems([{key: this.props.iokey, value: newUIValue}]);
                        } else {
                            throw new Error(`Could not find click target of ${this.props.iokey}`);
                        }
                    }
                }
            },
            children.map((child, index) => {
                let div = objectToDiv(child, null, `${this.props.iokey}__select_${index}`);
                let selected = (index == select.index);
                return h('div', { class: selected ? 'scripting-selected' : '' }, [ div ]);
            }));
        }
        if (this.props.dropdown) {
            let selectedDiv = objectToDiv(objectToChild(select.options, select.index), null, `${this.props.iokey}__selected`);
            return h('div', {
                class: 'tree-content',
                key: `${this.props.iokey}__tree`
            }, [
                h('div', {
                    class: 'tree-header ' + (this.state.expanded ? 'tree-expanded' : 'tree-collapsed'),
                    onClick: () => this.toggleExpand()
                }, [
                    this.props.iokey,
                    h('span', { class: 'tree-value scripting-item' }, [
                        selectedDiv,
                        //getShortName(select.options)
                    ])
                ]),
                seldiv
            ]);
        } else {
            return seldiv;
        }
    }
    toggleExpand() {
        this.setState({ expanded: !this.state.expanded });
    }
}

class UIButtonComponent extends Component<UIComponentProps> {
    render(virtualDom, containerNode, replaceNode) {
        let button = this.props.uiobject as scriptui.ScriptUIButtonType;
        return h('button', {
            class: button.enabled ? 'scripting-button scripting-enabled' : 'scripting-button',
            onClick: (e: MouseEvent) => {
                sendInteraction(button, 'click', e, { });
            },
        }, [ 
            button.label 
        ])
    }
}

class UIShortcutComponent extends Component<UIComponentProps> {
    render(virtualDom, containerNode, replaceNode) {
        let shortcut = this.props.uiobject as scriptui.ScriptUIShortcut;
        // TODO: needs to fire on container node
        return h('div', {
            onKeyDown: (e: KeyboardEvent) => {
                sendInteraction(shortcut, 'key', e, { });
            },
        }, [ ])
    }
}

const UI_COMPONENTS = {
    'slider': UISliderComponent,
    'select': UISelectComponent,
    'button': UIButtonComponent,
    'shortcut': UIShortcutComponent,
}

///

export class Notebook {
    constructor(
        public readonly maindoc: HTMLDocument,
        public readonly maindiv: HTMLElement
    ) {
        maindiv.classList.add('vertical-scroll');
    }
    updateCells(cells: Cell[]) {
        let hTree = cells.map(cell => {
            return h('div', {
                class: 'scripting-cell',
                key: `${cell.id}__cell`
            }, [
                objectToDiv(cell.object, cell.id, cell.id)
            ])
        });
        render(hTree, this.maindiv);
    }
}