import { Component, ReactNode, createElement } from "react";

import { <%- name %>ContainerProps } from "../typings/<%- name %>Props";
import { BadgeSample } from "./components/BadgeSample";
import "./ui/<%- name %>.css";

export class <%- name %> extends Component<<%- name %>ContainerProps> {
    private readonly onClickHandler = this.onClick.bind(this);

    render(): ReactNode {
        return (
            <BadgeSample
                type={this.props.<%- packageName %>Type}
                bootstrapStyle={this.props.bootstrapStyle}
                className={this.props.class}
                clickable={!!this.props.onClickAction}
                defaultValue={this.props.<%- packageName %>Value ? this.props.<%- packageName %>Value : ""}
                onClickAction={this.onClickHandler}
                style={this.props.style}
                value={this.props.valueAttribute ? this.props.valueAttribute.displayValue : ""}>
            </BadgeSample>
        );
    }

    private onClick(): void {
        if (this.props.onClickAction && this.props.onClickAction.canExecute) {
            this.props.onClickAction.execute();
        }
    }
}