'use strict';

import SummaryConcept from './SummaryConcept/SummaryConcept';
import Concept from './Concept';
import ObserveModelMixin from '../../ObserveModelMixin';
import SummaryConceptModel from '../../../Map/SummaryConcept';

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Styles from './concept-viewer.scss';

const ConceptViewer = createReactClass({
    displayName: 'ConceptViewer',
    mixins: [ObserveModelMixin],

    propTypes: {
        item: PropTypes.object.isRequired
    },

    render() {
        // All non-additive-conditions go in a single section. (If there are none, don't show a <div class=section> so we don't get an extra padding.)
        // Each additive-condition goes in its own section.
        const nonSummaryConcept = this.props.item.concepts.filter(concept => concept.isVisible && !SummaryConceptModel.prototype.isPrototypeOf(concept));
        return (
            <div className={Styles.root}>
                <If condition={nonSummaryConcept.length > 0}>
                    <div className={Styles.section}>
                        <For each="concept" index="i" of={nonSummaryConcept}>
                            <div className={Styles.inner} key={i}>
                                <ul className={Styles.childrenList}>
                                    <Concept concept={concept} isLoading={this.props.item.isLoading}/>
                                </ul>
                            </div>
                        </For>
                    </div>
                </If>
                <For each="concept" index="i"
                     of={this.props.item.concepts.filter(concept => concept.isVisible && SummaryConceptModel.prototype.isPrototypeOf(concept))}>
                    <div className={Styles.section} key={i}>
                        <ul className={Styles.childrenList}>
                            <SummaryConcept concept={concept} isLoading={this.props.item.isLoading}/>
                        </ul>
                    </div>
                </For>
            </div>
        );
    },
});

module.exports = ConceptViewer;