import React from 'react';
import { ReactComponent as CheckedMarkIcon } from "../../../assets/form-icons/check-radio.svg";
import { ReactComponent as UncheckedMarkIcon } from "../../../assets/form-icons/unchecked-radio.svg";
import { ReactComponent as ErrorMarkIcon } from "../../../assets/form-icons/error-radio.svg";
import { forRef } from "../../../decorators";
import { HighlightCode } from "../../../modules";
import { FormContext } from '../Form';
import { isString, isUndefined } from "../../../utils";
import { FONT_VARIANTS } from "../../../globalStyled";
const { body2Regular } = FONT_VARIANTS;
import { FORM } from "../../../constants";
const { FORM_DISABLED_STATE } = FORM;
import { RadioWrapperDiv, RadioWrapperInnerDiv, RadioIconBlockDiv, RadioTextBlockDiv, } from './styled';
export function renderMark({ error, checked, onClick, }) {
    let Icon = UncheckedMarkIcon;
    if (error) {
        Icon = ErrorMarkIcon;
    }
    if (checked) {
        Icon = CheckedMarkIcon;
    }
    return (React.createElement(RadioIconBlockDiv, { onClick: () => {
            onClick && onClick();
        } },
        React.createElement(Icon, null)));
}
class RadioC extends React.Component {
    constructor() {
        super(...arguments);
        this.$ref = React.createRef();
        this.onChange = ({ value }) => {
            const { props: { name, withContext }, context: { onChange: onChangeForm }, } = this;
            const { onChange } = this.props;
            if (onChange) {
                onChange(value || '');
            }
            if (withContext && onChangeForm) {
                onChangeForm(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);
            }
        }
    }
    render() {
        var _a, _b;
        const { props: { name, value, label, checked, withContext, disabled }, context: { fields, disabled: formDisable }, } = this;
        let formValue = '';
        let error = '';
        if (withContext) {
            formValue = !fields[name] ? '' : 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) ? formValue === value : checked;
        const isDisabled = disabled || formDisable === FORM_DISABLED_STATE.FORM;
        return (React.createElement(RadioWrapperDiv, null,
            React.createElement(RadioWrapperInnerDiv, { onClick: () => {
                    !isDisabled && this.onClick();
                } },
                renderMark({ error, checked: checkedInit }),
                React.createElement("input", { type: "radio", name: name, value: value || '', checked: checkedInit, onChange: ({ currentTarget }) => {
                        this.onChange({ value: currentTarget.value });
                    }, disabled: isDisabled, onClick: (e) => {
                        e.stopPropagation();
                    }, ref: this.$ref }),
                label && (React.createElement(RadioTextBlockDiv, { variant: body2Regular }, isString(label) ? React.createElement(HighlightCode, { content: label }) : label)))));
    }
}
RadioC.defaultProps = {
    withContext: true,
};
RadioC.contextType = FormContext;
const Radio = forRef(RadioC);
export { Radio, RadioC };
