import React, { useEffect } from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHTML, { HTMLElementModel, HTMLContentModel } from 'react-native-render-html';
import { InputRenderer } from './html/input';
import { ButtonRenderer } from './html/button';
import { Cfg } from './html/action';
import { SvgRenderer } from './html/svg';
import { TouchRenderer } from './html/touch';
import { ScrollRenderer } from './html/scroll';
import { ImgRoundedRenderer } from './html/roundedimage';
import { ChartRenderer } from './html/chart';
import { IconRenderer } from './html/icon';
import { FabRenderer } from './html/fab';
import { cfg } from './lib/cfg';
import { BlockRenderer } from './html/block';

const customHTMLElementModels = {
    'input' : HTMLElementModel.fromCustomModel({
        tagName: 'input',
        contentModel: HTMLContentModel.block
    })
    , 'button' : HTMLElementModel.fromCustomModel({
        tagName: 'button',
        contentModel: HTMLContentModel.block
    })
    , 'svg' : HTMLElementModel.fromCustomModel({
        tagName: 'svg',
        contentModel: HTMLContentModel.block
    })
    , 'touch' : HTMLElementModel.fromCustomModel({
        tagName: 'touch',
        contentModel: HTMLContentModel.block
    })
    , 'scroll' : HTMLElementModel.fromCustomModel({
        tagName: 'scroll',
        contentModel: HTMLContentModel.block
    })
    , 'img' : HTMLElementModel.fromCustomModel({
        tagName: 'img',
        contentModel: HTMLContentModel.block
    })
    , 'chart' : HTMLElementModel.fromCustomModel({
        tagName: 'chart',
        contentModel: HTMLContentModel.block
    })
    , 'icon' : HTMLElementModel.fromCustomModel({
        tagName: 'icon',
        contentModel: HTMLContentModel.block
    })
    , 'fab' : HTMLElementModel.fromCustomModel({
        tagName: 'fab',
        contentModel: HTMLContentModel.block
    })
    , 'block' : HTMLElementModel.fromCustomModel({
        tagName: 'block',
        contentModel: HTMLContentModel.block
    })
};

const renderers = {
    input: InputRenderer
    , button: ButtonRenderer
    , svg : SvgRenderer
    , touch : TouchRenderer
    , scroll : ScrollRenderer
    , img : ImgRoundedRenderer
    , chart : ChartRenderer
    , icon : IconRenderer
    , fab : FabRenderer
    , block : BlockRenderer
};

const Html = (props:any) => {
    const { width } = useWindowDimensions();
    cfg.counterHtml++;
    if(props?.action && typeof props?.action === 'object'){
        Object.keys(props?.action).forEach((name:string)=>{
            Cfg.addAction(name, props.action[name]);
        })
    }

    useEffect(()=>{
        (function(){
            // console.log(cfg)
        })();
    },[cfg])

    return (
        <RenderHTML
            contentWidth={width} // Ensure content adapts to available width
            source={{ html: props && props.html ? props.html : `` }}
            renderers={renderers}
            customHTMLElementModels={customHTMLElementModels}
        />
    );
};

export default Html;