import React, { Component } from 'react';
import JSONPretty from 'react-json-pretty';
import guid from 'guid';

class Converter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            template: '',
            generated: null
        }

        this.generateIds = this.generateIds.bind(this);
        this.createContentCell = this.createContentCell.bind(this);
    }

    generateIds(json) {
        for (var key in json) {
            try {
                if (Object.keys(json[key]).length != 0) {
                    if (typeof json[key] == 'object') {
                        json['id'] = guid.raw();
                        this.generateIds(json[key])
                    } else {
                        if (key.charAt(0) == '_') {
                            json[key.substr(1, key.length)] = json[key]
                            delete json[key];
                            delete json['id'];
                            json['id'] = guid.raw();
                        }
                    }
                }
            } catch (err) { }
        }
    }

    createContentCell(json){
        var tempJson = Object.assign({}, json);

        Object.keys(json).map(q => {
            if(typeof json[q] == 'object'){
                if(json[q].hasOwnProperty('class')){
                    if(json[q]["class"] == 'row'){
                        // console.log(json[q])
                        json['cells'] = [
                            json[q]
                        ]
                        delete json[q]['class']
                        this.createContentCell(json[q])
                        delete json[q]

                    }else{
                        this.createContentCell(json[q])
                    }
                }else{
                    this.createContentCell(json[q]);
                }



            }else{
                console.log(typeof json[q])
            }
        })
    }

    variableValidation(q) {
        var types = ['text', 'link', 'image']

        if (typeof q.type != 'undefined') {
            if (types.includes(q.type.toLowerCase())) {
                console.log(q.type);
            }
        }
    }


    convert() {
        let { template } = this.state;
        var x2js = new X2JS();
        let json = x2js.xml2js(template);

        if (json) {
            this.generateIds(json);
            this.createContentCell(json);

            return (
                <div style={{ marginTop: 10 }}>
                    <JSONPretty id="json-pretty" json={json}></JSONPretty>
                </div>
            )
        } else {
            return <h3>Enter a valid template value.</h3>
        }
    }

    render() {
        let { template } = this.state;

        return (
            <div class="form-group">
                <hr />

                <div>
                    <textarea class="form-control" value={template} rows="7" onChange={(e) =>
                        this.setState({
                            template: e.target.value
                        })
                    }></textarea>
                </div>

                {
                    (template) ?
                        this.convert() :
                        <h3>Please enter template.</h3>
                }

            </div>
        )
    }
}

export default Converter;