import React, { Component } from "react";

import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

import PropsTypes from 'prop-types';

class JsonView extends Component{

    constructor(props){
        super(props);
        this.state = {};
    }

    componentWillMount(){
        this.setState({data:this.props.data,fieldsMetaInfo:this.props.fieldsMetaInfo})
    }

    componentWillReceiveProps(nextProps){
        this.setState({data:nextProps.data})
    }

    render(){
        var data = this.state.data;

        var dataKeys = Object.keys(data);
        return (
            <Row id="json-view" >
                {
                    dataKeys.map((key,i) => {
                        return (
                            <div key={i}>
                                {this.renderField(dataKeys[key],key)}
                                {this.renderValue(data[key],key)}
                            </div>
                        )
                    })
                }
            </Row>
        )
    }

    renderField = (field,key) => {
        var fieldsMetaInfo = this.state.fieldsMetaInfo;
        if(fieldsMetaInfo){
            if (!fieldsMetaInfo.fieldsToExclude.includes(key)){
                var fieldToShow = fieldsMetaInfo[key].label;
                return (
                    <Col xs={12} sm={12} md={12} className="field">{fieldToShow}</Col>
                )
            }
        }else{
            return <Col xs={12} sm={12} md={12} className="field">{key}</Col>
        }

    }

    renderValue = (value,key) => {
        var fieldsMetaInfo = this.state.fieldsMetaInfo;

        if (fieldsMetaInfo){
            if (!fieldsMetaInfo.fieldsToExclude.includes(key)){
                var type = fieldsMetaInfo[key].type;
                if (type === 'link'){
                    return (
                        <Col xs={12} sm={12} md={12} className="value">
                            <a href={value} target="_blank">{value}</a>
                        </Col>
                    )
                }else if (type === 'image'){
                    return (
                        <Col xs={12} sm={12} md={12} className="value">
                            <img src={value} alt="" />
                        </Col>
                    )
                }else if (type === 'html'){
                    return (
                        <Col dangerouslySetInnerHTML={{__html:value}} xs={12} sm={12} md={12} className="value" />
                    )
                }else if (type === 'array'){
                    return (
                        <Col>
                            {
                                value.map((item,i) =>
                                    <Col key={i} xs={12} sm={12} md={12} className="value">
                                        {i+1}) {item}
                                    </Col>
                                )
                            }
                        </Col>
                    )
                }
                else if (type === 'date'){
                    return (
                        <Col xs={12} sm={12} md={12} className="value">this is date</Col>
                    )
                }
                else {
                    return (
                        <Col xs={12} sm={12} md={12} className="value">{value && value.toString()}</Col>
                    )
                }
            }
        }else {
            return <Col xs={12} sm={12} md={12} className="value">{value && value.toString()}</Col>
        }

    }
}

JsonView.propTypes = {
    data:PropsTypes.object,
    fieldsMetaInfo:PropsTypes.object
}
export default JsonView

/*
-------------USAGE-----------------

var users = [{
            name:"abc xyz",
            age:"12",
            education:["abc","xyz","foo bar"]
        },{
            name:"123 789",
            age:"14",
            education:["abc","xyz","foo bar"]
        }]

var userMetaInfo = {
    name:{
        label:"Name",
        type:"String"
    },
    age:{
        label:"Age",
        type:"String"
    },
    education:{
        label:"Education",
        type:"Array"
    }
}

const renderUser = () => {
    return <JsonView
                data={users}
                fieldsMetaInfo={userMetaInfo}
            />
}

*/