import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { Field } from "redux-form";
import { RenderYesNo } from "./renderYesNo";
import { hasOwn } from "../../utils";

export function YesNofield(props) {
    const router = useRouter();
    let { t } = useTranslation();

    const { parentField, form, formProps, parentFieldShowOnValue } = props;

    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
    const required = (value) => (value ? undefined : "Required");

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

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={props.name}
                        datafieldname={props.name}
                        label={props.label}
                        options={yesNo}
                        id={props.name}
                        className={"govuk-radios__input"}
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                        component={RenderYesNo}
                        inline={hasOwn(props, "inline") ? props.inline : "true"}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        requiredDocumentValue={props.requiredDocumentValue}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                    />
                )
            ) : (
                <Field
                    name={props.name}
                    datafieldname={props.name}
                    label={props.label}
                    options={yesNo}
                    id={props.name}
                    className={"govuk-radios__input"}
                    validate={[required]}
                    errorMsg={t("newappeal:select-an-option-label")}
                    component={RenderYesNo}
                    inline={hasOwn(props, "inline") ? props.inline : "true"}
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}