import React from "react";
import { JSONPath as jsonpath } from "jsonpath-plus";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
import pickListLookup from "../../../data/picklistLookups.json";
import {
    getFieldTranslation,
    getPickListTranslation
} from "../helpers/translationHelpers";

export const RenderPickList = ({
    datafieldname,
    picklistData,
    id,
    name,
    label,
    input,
    errorMsg,
    meta: { touched, error }
}) => {
    let { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;
    const { appealtypes } = router.query;

    var dropdownObj = jsonpath({
        path:
            "$..value[?(@ && @.LogicalName=='" + datafieldname + "')]..Options",
        json: picklistData,
        eval: true
    });
    dropdownObj = dropdownObj[0];

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

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {translatedLabel}
                </label>
                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {error}
                    </span>
                )}
                <select {...input} className="govuk-select " id={id} name={id}>
                    <option value="" disabled defaultValue>
                        {t("newappeal:select-default")}
                    </option>
                    {Object.keys(dropdownObj).map((key, index) => {
                        const translatedOption = getPickListTranslation({
                            optionValue:
                                dropdownObj[key].Label.LocalizedLabels[0].Label,
                            locale,
                            pickListLookup
                        });

                        return (
                            <option key={key} value={dropdownObj[key].Value}>
                                {translatedOption}
                            </option>
                        );
                    })}
                </select>
            </div>
        </>
    );
};