import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { Field } from "redux-form";
import { RenderRadio } from "./renderRadio";
import { validateField } from "../validationUtils";
import { hasOwn } from "../../utils";

const isVisibleByInclusion = ({
    parentField,
    form,
    formProps,
    parentFieldShowOnValue
}) =>
    parentField != false &&
    !_.isEmpty(formProps[form]) &&
    hasOwn(formProps[form].values, parentField) &&
    parentFieldShowOnValue.indexOf(
        formProps[form].values[parentField].toString()
    ) > -1;

export function Radiofield(props) {
    const {
        name,
        label,
        datafieldname,
        form,
        formProps,
        parentFieldShowOnValue,
        parentField,
        validation
    } = props;

    let { t } = useTranslation();

    const fieldOptions = props.options
        .slice(1, props.options.length - 1)
        .split(",");

    const showIfHasParentShowValue = isVisibleByInclusion({
        parentField,
        form,
        formProps,
        parentFieldShowOnValue
    });

    const requiredMessage = t("newappeal:is-required-label");
    const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
    const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        datafieldname={datafieldname}
                        label={label}
                        options={fieldOptions}
                        id={name}
                        errorMsg={t("newappeal:select-an-option-label")}
                        component={RenderRadio}
                        inline={props.inline}
                        hint={props.hint}
                        validate={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        }
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        requiredDocumentValue={props.requiredDocumentValue}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                    />
                )
            ) : (
                <Field
                    name={name}
                    datafieldname={datafieldname}
                    label={label}
                    options={fieldOptions}
                    id={name}
                    errorMsg={t("newappeal:select-an-option-label")}
                    component={RenderRadio}
                    inline={props.inline}
                    hint={props.hint}
                    validate={(value) =>
                        validateField(
                            value,
                            validation,
                            requiredMessage,
                            emojiNotAllowedMessage,
                            invalidPostcodeMessage
                        )
                    }
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}