import * as React from 'react';
import {isEmpty} from 'lodash';
import classNames from 'classnames';
import {getId} from '../function';
import RenderHtml from '../renderFunction';
import PropsTypes from './types';
import FormComponent from '../FormComponent';

interface State extends PropsTypes {
    uuid: string,
    doValidate: boolean
}

export default class Button extends FormComponent<PropsTypes, State> {

    public state: State;
    private input = React.createRef<HTMLInputElement>();

    constructor(props: PropsTypes, {}) {
        super(props);
        const uuid = getId(props.id, this.defaultId);
        this.state = {
            uuid: uuid,
            checked: props.checked,
            doValidate: !props.disabled || false,
            type: props.type ? props.type : 'checkbox'
        };
    }

    componentDidMount() {
        this.validate(this.state.checked ? 'true' : '')
    }

    componentWillReceiveProps(nextProps: PropsTypes) {
        if (nextProps.checked !== this.props.checked) {
            this.setState({
                checked: nextProps.checked
            })
        }
    }

    handleCheck = () => {
        if (this.props.disabled) return;

        this.setState({
            checked: !this.state.checked,
        }, () => {
            this.validate(this.state.checked ? 'true' : '');
            this.props.onChange && this.props.onChange(this.state.checked)
        })

    };

    public render(): JSX.Element {

        const {checked, uuid, type} = this.state;
        const {size, customStyle, color, disabled, position, caption} = this.props;

        const uiClass = classNames(`jump-ui-container jump-ui-${type} ${size || 'medium'}-ui ${customStyle} check-${color || 'default'}`, {
                'disabled': disabled || this.readOnly(),
                'color': color,
                'error': !isEmpty(this.error()),
                'checkmark-right': position === 'right'
            }),
            checkmarkError = classNames('checkmark', {
                'error-checkmark': this.error() && !isEmpty(this.error())
            });
        return (
            <div className={`${uiClass} default-ui checkbox-${color} ${size || 'tiny'}-ui`}>
                <label className="jump-c-ui">
                    <input
                        id={`checkbox-${uuid}`}
                        name={this.props.name}
                        type={type}
                        className="jump-ui"
                        checked={checked}
                        onChange={() => this.handleCheck()}
                        disabled={disabled}
                        readOnly={this.readOnly()}
                        ref={this.input}
                        tabIndex={0}
                    />
                    <span className={checkmarkError} />
                    <div className="ui-caption">
                        {caption}
                    </div>
                </label>
                {RenderHtml.renderError(this.error())}
            </div>
        );
    }
}