import React from "react";
import { useRouter } from "next/router";
import { Field } from "redux-form";
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
import { getFieldTranslation } from "../helpers/translationHelpers";

export const RenderYesNo = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const router = useRouter();
    const { locale } = router;
    const { appealtypes } = router.query;

    const translatedLabel = getFieldTranslation({
        label,
        locale,
        appealtypes,
        fieldLookup
    });

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={id + "_label"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {translatedLabel}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div
                        className={
                            custom.inline == false
                                ? "govuk-radios govuk-radios--small"
                                : "govuk-radios govuk-radios--inline govuk-radios--small"
                        }
                    >
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-radios__item"
                                data-children-count={key}
                                key={key}
                            >
                                <Field
                                    id={id + "_" + index}
                                    name={id}
                                    component="input"
                                    type="radio"
                                    className="govuk-radios__input"
                                    value={
                                        options[key] == "Yes" ||
                                        options[key] == "Ydw"
                                            ? true
                                            : false
                                    }
                                    checked={
                                        typeof value != "undefined" &&
                                        value ==
                                            (options[key] == "Yes" ||
                                            options[key] == "Ydw"
                                                ? "true"
                                                : "false")
                                    }
                                    onChange={(e) => {
                                        let docListObj = custom.documentList;
                                        if (
                                            custom.requiredDocumentValue ==
                                                "Yes" ||
                                            custom.requiredDocumentValue ==
                                                "Ydw" ||
                                            custom.requiredDocumentValue ==
                                                "true"
                                        ) {
                                            e.target.value == "Ydw" ||
                                            e.target.value == "Yes" ||
                                            e.target.value == "true"
                                                ? (docListObj = Object.assign(
                                                      docListObj,
                                                      {
                                                          ["documentCheckList_" +
                                                          id]:
                                                              custom.requiredDocumentLabel
                                                      }
                                                  ))
                                                : delete docListObj[
                                                      "documentCheckList_" + id
                                                  ];
                                            custom.setDocumentsList(docListObj);
                                        }
                                    }}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};