import React from 'react';
import { ReactComponent as CheckedMark } from "../../../assets/form-icons/check-checkbox.svg";
import { ReactComponent as UncheckedMark } from "../../../assets/form-icons/unchecked-checkbox.svg";
import { ReactComponent as IndeterminateMark } from "../../../assets/form-icons/indeterminate-checkbox.svg";
import { ReactComponent as ErrorMark } from "../../../assets/form-icons/error-checkbox.svg";
import { ReactComponent as CheckSwitchMark } from "../../../assets/form-icons/check-switch.svg";
import { ReactComponent as UncheckedSwitchMark } from "../../../assets/form-icons/unchecked-switch.svg";
import { forRef } from "../../../decorators";
import { HighlightCode } from "../../../modules";
import { isUndefined, isString } from "../../../utils";
import { FORM } from "../../../constants";
const { FORM_DISABLED_STATE } = FORM;
import { FONT_VARIANTS } from "../../../globalStyled";
const { body2Regular } = FONT_VARIANTS;
import { FormContext } from '../Form';
import { CheckboxWrapperDiv, CheckboxWrapperInnerDiv, CheckboxInfoText, CheckboxTextBlockDiv, SwitchBlockDiv, CheckboxBlockDiv, } from './styled';
export const VARIANT = {
    checkBox: 'checkBox',
    switch: 'switch',
};
export function renderMark({ error, checked, indeterminate, variant, onClick, disabled = false, }) {
    let Icon = UncheckedMark;
    if (error) {
        Icon = ErrorMark;
    }
    if (VARIANT[variant] === VARIANT.switch) {
        if (checked) {
            Icon = CheckSwitchMark;
        }
        else {
            Icon = UncheckedSwitchMark;
        }
        return (React.createElement(SwitchBlockDiv, null,
            React.createElement(Icon, null)));
    }
    if (VARIANT[variant] === VARIANT.checkBox) {
        if (checked && !indeterminate) {
            Icon = CheckedMark;
        }
        if (checked && indeterminate) {
            Icon = IndeterminateMark;
        }
    }
    return (React.createElement(CheckboxBlockDiv, { "$disabled": disabled, onClick: () => {
            onClick && !disabled && onClick();
        } },
        React.createElement(Icon, null)));
}
class CheckBoxC extends React.Component {
    constructor() {
        super(...arguments);
        this.$ref = React.createRef();
        this.onChange = (currentValue) => {
            const { props: { name, withContext }, context: { onChange: onChangeForm }, } = this;
            const { onChange } = this.props;
            if (onChange) {
                onChange(currentValue, name);
            }
            if (withContext && onChangeForm) {
                onChangeForm(name, currentValue);
            }
        };
        this.onEnterPress = (event) => {
            if (event.key === 'Enter') {
                const { fields } = this.context, { name } = this.props;
                this.onChange(!fields[name].value);
            }
        };
        //Выполняем клик по самому input для срабатывания onChange на input
        this.onClick = () => {
            var _a;
            if (this.$ref) {
                (_a = this.$ref.current) === null || _a === void 0 ? void 0 : _a.click();
            }
        };
    }
    componentDidMount() {
        const { props } = this, { withContext } = props;
        if (withContext) {
            const { context: { addField }, } = this;
            if (addField) {
                addField(props);
            }
        }
    }
    componentWillUnmount() {
        const { props } = this, { withContext } = props;
        if (withContext) {
            const { context: { deleteField }, } = this;
            if (deleteField) {
                deleteField(props.name);
            }
        }
    }
    componentDidUpdate({ value: prevValue }) {
        const { props: { value, withContext }, } = this;
        if (prevValue !== value && withContext) {
            this.onChange(value);
        }
    }
    render() {
        var _a, _b;
        const { props: { name, disabled, label, text, id, checked: Checked, withContext, indeterminate = false, variant = 'checkBox', }, context: { fields, disabled: formDisable }, } = this;
        let checked = false;
        let error = '';
        //Проверяем положение checked из формы если он есть
        if (withContext) {
            checked = !fields[name] ? false : !!fields[name].value;
            error = !fields[name] ? '' : (_b = (_a = fields[name]) === null || _a === void 0 ? void 0 : _a.validation) === null || _b === void 0 ? void 0 : _b.errorMessage;
        }
        const checkedInit = isUndefined(Checked) ? checked : Checked;
        const isDisabled = disabled || formDisable === FORM_DISABLED_STATE.FORM;
        return (React.createElement(CheckboxWrapperDiv, { onKeyPress: this.onEnterPress },
            React.createElement(CheckboxWrapperInnerDiv, { onClick: () => {
                    !isDisabled && this.onClick();
                } },
                renderMark({
                    error,
                    checked: checkedInit,
                    indeterminate,
                    variant,
                    disabled: isDisabled,
                }),
                React.createElement("input", { type: "checkbox", id: id || name, name: name, disabled: isDisabled, checked: checkedInit, 
                    //Останавливаем повторное всплытие клика вызванное в методе this.onClick
                    onClick: (e) => {
                        e.stopPropagation();
                    }, onChange: ({ currentTarget }) => this.onChange(currentTarget.checked), ref: this.$ref }),
                label && (React.createElement(CheckboxTextBlockDiv, { "$disabled": isDisabled, variant: body2Regular }, isString(label) ? React.createElement(HighlightCode, { content: label }) : label))),
            text && React.createElement(CheckboxInfoText, { variant: body2Regular }, text)));
    }
}
CheckBoxC.defaultProps = {
    value: false,
    withContext: true,
};
CheckBoxC.contextType = FormContext;
const CheckBox = forRef(CheckBoxC);
export { CheckBox, CheckBoxC };
