import React from "react";
import {Text, View, StyleSheet, TouchableOpacity, Dimensions} from "react-native";
import PropTypes from 'prop-types'
import {Icon} from "react-native-hitcode-components";


class Tag extends React.Component {

    componentDidUpdate(prevProps, prevState) {
        if(this.props.active !== prevProps.active ){
            this.setState({toggled: this.props.active})
        }
    }

    componentWillMount() {
        if(this.props.active) {
            this.setState({toggled: true})
        }
    }

    constructor(props) {
        super(props);
        this.state = {
            toggled: false,
        }
    }

    onPress(){
        if(this.props.onPress != null) {
            this.props.onPress();
        }
        if(!this.props.skipToggleBehaviour){
            this.setState({toggled: !this.state.toggled})
        }

    }

    render() {
        return (
            <View style={[styles.containerView, {height: this.props.height}]}>
                <TouchableOpacity
                    disabled={this.props.clickable}
                    onPress={() => this.onPress()}
                    style={[styles.mainView, {
                        backgroundColor: this.state.toggled ? this.props.toggledBackgroundColor : this.props.backgroundColor,
                        borderColor: this.state.toggled ? this.props.toggledBorderColor : this.props.borderColor
                    }, this.props.mainView]}>
                    <Text
                        style={[styles.textStyle, {color: this.state.toggled ?  this.props.toggledFontColor : this.props.fontcolor}, this.props.textStyle]}>{this.props.title}</Text>
                    {this.props.removeIcon ?
                        <TouchableOpacity style={{justifyContent: 'center', marginRight: 5}} onPress={() => {
                            props.onRemove(props.title);
                        }}>
                            <Icon name='close' size={16} style={[styles.iconStyle, this.props.iconStyle]}/>
                        </TouchableOpacity>
                        : undefined
                    }

                </TouchableOpacity>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    containerView: {
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "flex-start",

    },
    mainView: {
        borderWidth: 0.6,
        borderRadius: 12,
        opacity: 1,
        flexDirection: 'row',
        paddingVertical: 3,
        paddingHorizontal: 10,
        marginHorizontal: 3,
        marginVertical: 5
    },
    textStyle: {
        fontWeight: 'normal',
        padding: 3,
    },
    iconStyle: {
        color: 'white',
        fontWeight: 'bold',
    }
});

Tag.propTypes = {
    height: PropTypes.number,
    backgroundColor: PropTypes.string.isRequired,
    color: PropTypes.string,
    toggledColor: PropTypes.string,
    fontColor: PropTypes.string,
    toggledFontColor: PropTypes.string,
    borderColor: PropTypes.string,
    toggledBorderColor: PropTypes.string,
    skipToggleBehaviour: PropTypes.bool,

    clickable: PropTypes.bool,


    removeIcon: PropTypes.bool,
    onRemove: PropTypes.func,
    mainView: PropTypes.object,
    textStyle: PropTypes.object,
};

Tag.defaultProps = {
    height: 50,
    skipToggleBehaviour: false,
    removeIcon: false,
    clickable: false,
    color: 'white',
    fontColor: 'black',
    toggledColor: 'green',
    toggledFontColor: 'white',
    toggledBackgroundColor: 'green',
    borderColor: 'lightgrey',
    toggledBorderColor: 'transparent'
};

export default Tag;
