import React, { Component } from "react"
import { View, Text, ViewStyle } from 'react-native';

import BaseFunc from '../base/func'
import { IformProp, IformOption } from '../aim/form'
import { IbaseStyleExtend, IbasePropertyExtend } from "../aim/face"
interface State {
}

interface Prop extends IbaseStyleExtend, IbasePropertyExtend {


}
const styles: IbaseStyleExtend = {
    styleMainView: {

    }
};
/**
 * Hello
 */
export default class extends Component<Prop, State>{

    constructor(props: Prop) {
        super(props);
    }

    render() {
        let aView = [];



        if (this.props.pText != undefined) {

            let aMapColor = new Map();
            if (this.props.pColor != undefined) {
                aMapColor = BaseFunc.stringToMap(this.props.pColor);

            }

            this.props.pText.split(',').forEach(
                (fItem) => {

                    let styleBackColor: ViewStyle = {};
                    if (aMapColor.has(fItem)) {
                        styleBackColor.backgroundColor = aMapColor.get(fItem);
                    }

                    if (!BaseFunc.stringIsEmpty(fItem)) {
                        aView.push(<View key={fItem} style={[this.props.styleItemBox, styleBackColor]}><Text style={this.props.styleItemText}>{fItem}</Text></View>)
                    }

                }
            )
        }
        return (

            <View style={this.props.styleMainView}>
                {
                    aView
                }
            </View>

        );
    }


}