import React from 'react'
import ColumnCard from './ColumnCard'
import yang from '../yang/leaf-utils.js'

export default class extends React.Component {

    render() {
        try {
            const { model, path, isReadonly, properties, editElement } = this.props;
            const element = model.getElement(path);
            console.debug(`LeafGroup: ${element.name}`);
            const container = element.value;
            const leaves = properties.reduce((leaves, property, index) => {
                const itemPath = path.slice();
                itemPath.push(property.name);
                const props = { model, 'path': itemPath };
                let value = (container && container[property.name]);
                let valueIsSet = yang.isValueSet(property, value);
                if (!valueIsSet) {
                    value = yang.getDefaultValue(property);
                    valueIsSet = yang.isValueSet(property, value);
                }
                if (valueIsSet) {
                    value = yang.getDisplayValue(property, value);
                }
                valueIsSet && leaves.push(
                    <div key={property.name} className='leaf-group-leaf' style={{ maxWidth: '400px' }} >
                        <div style={{ fontSize: 'small', color: 'gray' }} >{`${property.name}`}</div>
                        <div style={{paddingLeft: '4px'}} >{value}</div>
                    </div>
                );
                return leaves;
            }, [])
            return (
                <ColumnCard path={path}>
                    <div className='leaf-group'>
                        {leaves}
                    </div>
                </ColumnCard>
            )
        } catch (e) {
            console.error("component render", e);
        }
    }
}