import { Component } from 'react';
import { connect } from 'react-redux';
import CardIcon from './CardIcon';
import ContextActions from './actions/ContextActions';
import { conditions } from './conditionsOrFilters/CardCreator';

const {newConditionOrFilter} = ContextActions;

class PreconditionButton extends Component {
    static mapStateToProps(state, props) {
        return {
            conditionCard: props.conditionCard
        };
    };

    render() {
        if (!this.props.conditionCard) {
            return
        }

        return <div className="flex flex-row items-center justify-between p-1 rounded-3 bg-gray-100">
            <div className="flex items-center space-x-1">
                <CardIcon icon={this.props.conditionCard.getIcon()} size={'small'}/>
                <h1 className="text-smaller-1 text-gray-450">{this.props.conditionCard.getTitle()}</h1>
            </div>
            <button className="flex items-center space-x-1 text-smaller-1 px-2 h-6 border-px border-gray-200 rounded-3 to-gray-450 leading-[11px] whitespace-nowrap" onClick={() => {
                this.props.newConditionOrFilter(
                    this.props.conditionCard.constructor.TYPE,
                    'preconditions-context',
                    'preconditions-column'
                )
            }}>
                <span>{this.props.conditionCard.getDefaultValueLabel()}</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-3 max-w-3 min-h-3 max-h-3 mt-[-2px]">
                    <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
            </button>
        </div>;
    }
}

export default connect(PreconditionButton.mapStateToProps, {newConditionOrFilter})(PreconditionButton);