'use strict';

const React = require("react");
const createReactClass = require("create-react-class");

module.exports = function ({dependencies}) {
	require("../abbreviated-item")({dependencies});

	dependencies.set("AstItemChildSequence", createReactClass({
		displayName: "AstItemChildSequence",
		render: function () {
			const AbbreviatedAstItem = dependencies.get("AbbreviatedAstItem");

			return (
				<div key={this.props.itemKey} className="child">
					<span className="name">{this.props.itemKey}</span>
					<div className="items">
						{this.props.value.map((item, i) => {
							return (
								<span key={`${this.props.itemKey}:${i}`} className="item">
									{/* FIXME: The way the key is generated here, may break rendering after AST mutations. */}
									<AbbreviatedAstItem data={item} />
								</span>
							);
						})}
					</div>
				</div>
			);
		}
	}));
};