import useSWR from "swr";
import { Field, reduxForm } from "redux-form";
import { useRouter } from "next/router";
import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
import cy from "date-fns/locale/cy";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import jsonpath from "jsonpath";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import pickListLookup from "../../data/picklistLookups.json";
import useTranslation from "next-translate/useTranslation";
import FileUpload from "../newappeal/fileupload";
import Dropzone, { useDropzone } from "react-dropzone";
import _ from "lodash";
import { connect, useDispatch } from "react-redux";

import {
    addYears,
    addMonths,
    addDays,
    subYears,
    subMonths,
    subDays,
} from "date-fns";

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {FieldsTranslations(label)}
                </label>
                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {errorMsg}
                    </span>
                )}
                <input {...input} className={className} name={name} id={id} />
            </div>
        </>
    );
};

export function Textfield(props) {
    const {
        name,
        label,
        validation,
        ticketnumber,
        form,
        formProps,
        parentField,
        parentFieldShowOnValue,
        hint,
    } = props;
    const required = (value) => (value ? undefined : "Required");

    if (name == "pinswg_name") {
        let { t } = useTranslation();

        return (
            <>
                <div className="govuk-form-group">
                    <label className="govuk-label " htmlFor={props.name}>
                        {label}
                    </label>
                    <input
                        type="text"
                        name={name}
                        id={props.name}
                        component={RenderCaseID}
                        value={ticketnumber}
                        className="govuk-input  govuk-input--width-20"
                        disabled
                    />
                </div>
                <div className="govuk-body">{t(hint)}</div>
            </>
        );
    } else {
        var showIfHasParentShowValue =
            (parentField != false &&
                !_.isEmpty(formProps[form]) &&
                _.has(formProps[form].values, parentField) &&
                formProps[form].values[parentField]) == parentFieldShowOnValue;

        // console.log(parentField, showIfHasParentShowValue);
        // console.log(parentField, formProps, form);

        //console.log("validation props:", validation);

        return (
            <div className="govuk-form-group">
                {parentField != false ? (
                    showIfHasParentShowValue && (
                        <Field
                            name={props.name}
                            id={props.name}
                            component={RenderTextfield}
                            type="text"
                            className="govuk-input govuk-input--width-20"
                            validate={eval(validation)}
                            label={props.label}
                            errorMsg="Is required"
                        />
                    )
                ) : (
                    <Field
                        name={props.name}
                        id={props.name}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={eval(validation)}
                        label={props.label}
                        errorMsg="Is required"
                    />
                )}
            </div>
        );
    }
}

const RenderMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {FieldsTranslations(label)}
                </label>
                {touched && error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {touched &&
                            ((error && (
                                <span>{errorMsg ? errorMsg : error}</span>
                            )) ||
                                (warning && <span>{warning}</span>))}
                    </span>
                )}
                <textarea
                    {...input}
                    rows={rows}
                    className={className}
                ></textarea>
            </div>
        </>
    );
};

export function MultiLinefield(props) {
    const {
        name,
        label,
        parentField,
        form,
        formProps,
        parentFieldShowOnValue,
        validation,
    } = props;
    const required = (value) => (value ? undefined : "Is required");

    var showIfHasParentShowValue =
        (parentField != false &&
            !_.isEmpty(formProps[form]) &&
            _.has(formProps[form].values, parentField) &&
            formProps[form].values[parentField]) == parentFieldShowOnValue;

    // console.log(parentField, showIfHasParentShowValue);

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <div>
                        <h1 className="govuk-label-wrapper">
                            <label className="govuk-label" htmlFor={props.name}>
                                {FieldsTranslations(props.label)}
                            </label>
                        </h1>
                        <div
                            id={props.name + "-hint"}
                            className="govuk-hint govuk-!-font-size-14"
                        >
                            Do not include personal or financial information.
                        </div>
                        <Field
                            name={props.name}
                            id={props.name}
                            component={RenderMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            validate={eval(validation)}
                        />
                    </div>
                )
            ) : (
                <div className="govuk-form-group">
                    <h1 className="govuk-label-wrapper">
                        <label className="govuk-label" htmlFor={props.name}>
                            {FieldsTranslations(props.label)}
                        </label>
                    </h1>
                    <div
                        id={props.name + "-hint"}
                        className="govuk-hint govuk-!-font-size-14"
                    >
                        Do not include personal or financial information.
                    </div>

                    <Field
                        name={props.name}
                        id={props.name}
                        component={RenderMultiline}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={eval(validation)}
                    />
                </div>
            )}
        </>
    );
}

const RenderDatePicker = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const router = useRouter();
    registerLocale("cy", cy);

    var startDateArr =
        custom.dateStart != "0" ? custom.dateStart.split("") : custom.dateStart;
    var endDateArr =
        custom.dateEnd != "0" ? custom.dateEnd.split("") : custom.dateEnd;

    var minDate =
        startDateArr == 0
            ? new Date()
            : startDateArr[0] == "-"
            ? startDateArr[2] == "y"
                ? subYears(new Date(), startDateArr[1])
                : startDateArr[2] == "m"
                ? subMonths(new Date(), startDateArr[1])
                : subDays(new Date(), startDateArr[1])
            : startDateArr[2] == "y"
            ? addYears(new Date(), startDateArr[1])
            : startDateArr[2] == "m"
            ? addMonths(new Date(), startDateArr[1])
            : addDays(new Date(), startDateArr[1]);

    var maxDate =
        endDateArr == 0
            ? new Date()
            : startDateArr[0] == "-"
            ? startDateArr[2] == "y"
                ? subYears(new Date(), startDateArr[1])
                : startDateArr[2] == "m"
                ? subMonths(new Date(), startDateArr[1])
                : subDays(new Date(), startDateArr[1])
            : startDateArr[2] == "y"
            ? addYears(new Date(), startDateArr[1])
            : startDateArr[2] == "m"
            ? addMonths(new Date(), startDateArr[1])
            : addDays(new Date(), startDateArr[1]);

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    role="group"
                    aria-describedby="dob-hint"
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading"
                            id={id + "_label"}
                        >
                            {FieldsTranslations(label)}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <DatePicker
                        {...custom}
                        locale={router.locale}
                        autoOk={true}
                        dateFormat="dd/MM/yyyy"
                        onChange={onChange}
                        selected={value || null}
                        className="govuk-input govuk-input--width-10"
                        minDate={minDate}
                        maxDate={maxDate}

                        // value={!value ? null : new Date(value)}
                    />
                </fieldset>
            </div>
        </>
    );
};

export function DateFieldPicker(props) {
    const {
        name,
        label,
        parentField,
        form,
        formProps,
        parentFieldShowOnValue,
        validation,
        dateStart,
        dateEnd,
    } = props;
    const required = (value) => (value ? undefined : "Required");

    var showIfHasParentShowValue =
        (parentField != false &&
            !_.isEmpty(formProps[form]) &&
            _.has(formProps[form].values, parentField) &&
            formProps[form].values[parentField]) == parentFieldShowOnValue;

    return (
        <div className="govuk-form-group">
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        id={name}
                        label={label}
                        component={RenderDatePicker}
                        validate={eval(validation)}
                        errorMsg="Select a date"
                        dateStart={dateStart}
                        dateEnd={dateEnd}
                    />
                )
            ) : (
                <Field
                    name={name}
                    id={name}
                    label={label}
                    component={RenderDatePicker}
                    validate={eval(validation)}
                    errorMsg="Select a date"
                    dateStart={dateStart}
                    dateEnd={dateEnd}
                />
            )}
        </div>
    );
}

export function DateField(props) {
    const { name, label } = props;

    return (
        <div className="govuk-form-group">
            <fieldset
                className="govuk-fieldset"
                role="group"
                aria-describedby={name + "-hint"}
            >
                <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                    <label className="govuk-fieldset__heading">
                        {FieldsTranslations(props.label)}
                    </label>
                </legend>
                <div className="govuk-date-input" id={name}>
                    <div className="govuk-date-input__item">
                        <div className="govuk-form-group">
                            <label
                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
                                htmlFor={props.name + "-day"}
                            >
                                Day
                            </label>
                            <Field
                                name={props.name + "-day"}
                                id={props.name + "-day"}
                                component="input"
                                type="text"
                                pattern="[0-9]*"
                                inputMode="numeric"
                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                            />
                        </div>
                    </div>
                    <div className="govuk-date-input__item">
                        <div className="govuk-form-group">
                            <label
                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
                                htmlFor={props.name + "-month"}
                            >
                                Month
                            </label>
                            <Field
                                name={props.name + "-month"}
                                id={props.name + "-month"}
                                component="input"
                                type="text"
                                pattern="[0-9]*"
                                inputMode="numeric"
                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                            />
                        </div>
                    </div>
                    <div className="govuk-date-input__item">
                        <div className="govuk-form-group">
                            <label
                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
                                htmlFor={props.name + "-year"}
                            >
                                Year
                            </label>
                            <Field
                                name={props.name + "-year"}
                                id={props.name + "-year"}
                                component="input"
                                type="text"
                                pattern="[0-9]*"
                                inputMode="numeric"
                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                            />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    );
}

const RenderYesNo = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={name + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {FieldsTranslations(label)}
                        </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]}
                                    onChange={(e) => {
                                        let docListObj = custom.documentList;
                                        if (
                                            custom.requiredDocumentValue ==
                                                "Yes" ||
                                            custom.requiredDocumentValue ==
                                                "Ydw"
                                        ) {
                                            e.target.value == "Ydw" ||
                                            e.target.value == "Yes"
                                                ? (docListObj = Object.assign(
                                                      docListObj,
                                                      {
                                                          ["documentCheckList_" +
                                                          id]:
                                                              custom.requiredDocumentLabel,
                                                      }
                                                  ))
                                                : delete docListObj[
                                                      "documentCheckList_" + id
                                                  ];
                                            console.log(docListObj);
                                            custom.setDocumentsList(docListObj);
                                        }
                                    }}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export function YesNofield(props) {
    const router = useRouter();

    const { name, label, inline, validation } = props;
    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
    const required = (value) => (value ? undefined : "Required");

    return (
        <Field
            name={props.name}
            datafieldname={props.name}
            label={props.label}
            options={yesNo}
            id={props.name}
            className={"govuk-radios__input"}
            validate={eval(validation)}
            errorMsg="Select an option"
            component={RenderYesNo}
            inline={_.has(props, "inline") ? props.inline : "true"}
            requiredDocumentLabel={props.requiredDocumentLabel}
            requiredDocumentValue={props.requiredDocumentValue}
            setDocumentsList={props.setDocumentsList}
            documentList={props.documentList}
        />
    );
}

const RenderRadio = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    let { t } = useTranslation();
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={name + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {FieldsTranslations(label)}
                        </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"
                        }
                    >
                        {" "}
                        {custom.hint != false && (
                            <div class="govuk-hint">{t(custom.hint)}</div>
                        )}
                        {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].split("|")[0]}
                                    onChange={(e) => {
                                        let docListObj = custom.documentList;
                                        if (
                                            custom.requiredDocumentValue ==
                                            "Yes"
                                        ) {
                                            e.target.value != "846040000"
                                                ? (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}
                                >
                                    {t(options[key].split("|")[1])}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

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

    const router = useRouter();
    const required = (value) => (value ? undefined : "Required");
    // console.log(props.options);

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

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

    // console.log(showIfHasParentShowValue);

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        datafieldname={datafieldname}
                        label={label}
                        options={fieldOptions}
                        id={name}
                        //validate={[required]}
                        errorMsg="Select an option"
                        component={RenderRadio}
                        inline={props.inline}
                        hint={props.hint}
                        validate={eval(validation)}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        requiredDocumentValue={props.requiredDocumentValue}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                    />
                )
            ) : (
                <Field
                    name={name}
                    datafieldname={datafieldname}
                    label={label}
                    options={fieldOptions}
                    id={name}
                    //validate={[required]}
                    errorMsg="Select an option"
                    component={RenderRadio}
                    inline={props.inline}
                    hint={props.hint}
                    validate={eval(validation)}
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}

const RenderCheckBox = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={name + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {FieldsTranslations(label)}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div className="govuk-checkboxes ">
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-checkboxes__item"
                                data-children-count={key}
                                key={key}
                            >
                                <Field
                                    id={id + "_" + index}
                                    name={id + "_" + index}
                                    component="input"
                                    type="checkbox"
                                    className="govuk-checkboxes__input"
                                    value={options[key]}
                                />
                                <label
                                    className="govuk-label govuk-checkboxes__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export function CheckBoxfield(props) {
    const router = useRouter();

    console.log(props);
    const required = (value) => (value ? undefined : "Required");
    const fieldOptions =
        router.locale == "cy" ? ["Ydw", "Na", "2323"] : ["Yes", "No", "23232"];
    return (
        <Field
            name={props.name}
            datafieldname={props.datafieldname}
            label={props.label}
            options={fieldOptions}
            id={props.id}
            className={props.className}
            //validate={[required]}
            errorMsg="Select an option"
            component={RenderCheckBox}
        />
    );
}

const RenderPickList = ({
    datafieldname,
    picklistData,
    name,
    label,
    input,
    meta: { touched, errorStr },
}) => {
    let { t } = useTranslation();

    var dropdownObj = jsonpath.query(
        picklistData,
        "$..value[?(@.LogicalName=='" + datafieldname + "')]..Options"
    );
    dropdownObj = dropdownObj[0];
    return (
        <div>
            <select {...input} className="govuk-select " id={name} name={name}>
                <option>{t("newappeal:select-default")}</option>
                {Object.keys(dropdownObj).map((key, index) => {
                    return (
                        <option key={key} value={dropdownObj[key].Value}>
                            {PickListTranslations(
                                dropdownObj[key].Label.LocalizedLabels[0].Label
                            )}
                        </option>
                    );
                })}
            </select>

            {touched && errorStr && <span>{errorStr}</span>}
        </div>
    );
};

export function PickList(props) {
    const { name, label, datafieldname } = props;

    return (
        <div className="govuk-form-group">
            <label className="govuk-label govuk-body-m" htmlFor={props.name}>
                {FieldsTranslations(label)}
            </label>
            <Field
                name={props.name}
                component={RenderPickList}
                datafieldname={datafieldname}
                picklistData={props.picklistData}
            />
        </div>
    );
}

export function NumericField(props) {
    const { name, label, validation } = props;
    const required = (value) => (value ? undefined : "Required");

    return (
        <div className="govuk-form-group">
            <label className="govuk-label" htmlFor={props.name}>
                {FieldsTranslations(props.label)}
            </label>
            <Field
                name={props.name}
                id={props.name}
                type="number"
                className="govuk-input  govuk-input--width-20"
                spellCheck="false"
                //aria-describedby="account-number-hint"
                pattern="[0-9]*"
                inputMode="numeric"
                parse={Number}
                validate={eval(validation)}
                component={RenderTextfield}
            />
        </div>
    );
}

export function DecimalField(props) {
    const { name, label, validation } = props;
    const required = (value) => (value ? undefined : "Required");

    return (
        <div className="govuk-form-group">
            <label className="govuk-label" htmlFor={props.name}>
                {FieldsTranslations(props.label)}
            </label>
            <Field
                name={props.name}
                id={props.name}
                // component="input"
                type="number"
                className="govuk-input govuk-input--width-10"
                spellCheck="false"
                //aria-describedby="account-number-hint"
                pattern="[0-9]*"
                inputMode="numeric"
                parse={Number}
                validate={eval(validation)}
                component={RenderTextfield}
            />
        </div>
    );
}

const RenderCaseID = {};

export function ReadOnlyfield(props) {
    const { name, label, value } = props;
    //console.log(props.value.refno);
    return (
        <>
            <div className="govuk-form-group">
                <label className="govuk-label " htmlFor={props.name}>
                    {FieldsTranslations(props.label)}
                </label>
                <input
                    type="text"
                    name={props.name}
                    id={props.name}
                    component={RenderCaseID}
                    value={value}
                    className="govuk-input  govuk-input--width-20"
                    disabled
                />
            </div>
        </>
    );
}

export const FieldsTranslations = (label) => {
    const router = useRouter();
    const { locale } = router;
    const { appealtypes } = router.query;

    let formObj = jsonpath.query(fieldLookup, "$['" + appealtypes + "']");

    let labelTrans =
        router.locale == "cy"
            ? jsonpath.query(
                  formObj,
                  "$..[?(@.value=='" + label + "')].value_cy"
              )
            : label;
    return labelTrans;
};

const PickListTranslations = (optionValue) => {
    const router = useRouter();
    const { locale } = router;
    const { appealtypes } = router.query;
    //console.log(optionValue);
    let optionTrans =
        router.locale == "cy"
            ? jsonpath.query(
                  pickListLookup,
                  '$..[?(@.value=="' + optionValue + '")].value_cy'
              )
            : optionValue;
    //console.log(optionTrans, optionValue);
    return optionTrans;
};

export function FileUploadField(props) {
    return (
        <div className="govuk-grid-row">
            <Field
                name={props.name}
                id={props.name}
                component={RenderFileUpload}
                className="govuk-input govuk-input--width-20"
                //validate={[required]}
                label={props.label}
                errorMsg="Is required"
            />
        </div>
    );
}

const baseStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    transition: "border .3s ease-in-out",
};

const activeStyle = {
    borderColor: "#2196f3",
};

const acceptStyle = {
    borderColor: "#00e676",
};

const rejectStyle = {
    borderColor: "#ff1744",
};

// const RenderFileUpload2 = ({
//     id,
//     className,
//     rows,
//     datafieldname,
//     name,
//     label,
//     input,
//     errorMsg,
//     meta: { touched, errorStr },
//     ...custom
// }) => {
//     const [files, setFiles] = useState([]);

//     const onDrop = useCallback((acceptedFiles, fileRejections, event) => {
//         setFiles(
//             acceptedFiles.map((file) =>
//                 Object.assign(file, {
//                     preview: URL.createObjectURL(file),
//                 })
//             )
//         );
//         console.log(acceptedFiles);
//         event.target[acceptedFiles];
//         console.log(event.target.files);
//     }, []);

//     const onChange = useCallback((acceptedFiles, fileRejections, event) => {
//         setFiles(
//             acceptedFiles.map((file) =>
//                 Object.assign(file, {
//                     preview: URL.createObjectURL(file),
//                 })
//             )
//         );
//         event.target.files[acceptedFiles];
//         console.log(event.target.files);
//     }, []);

//     const {
//         getRootProps,
//         getInputProps,
//         isDragActive,
//         isDragAccept,
//         isDragReject,
//     } = useDropzone({
//         onDrop,
//         onChange,
//     });

//     const style = useMemo(
//         () => ({
//             ...baseStyle,
//             ...(isDragActive ? activeStyle : {}),
//             ...(isDragAccept ? acceptStyle : {}),
//             ...(isDragReject ? rejectStyle : {}),
//         }),
//         [isDragActive, isDragReject, isDragAccept]
//     );

//     const thumbs = files.map((file) => (
//         <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
//             <img src={file.preview} alt={file.name} width="50" /> -{" "}
//             <span className="govuk-body">
//                 {file.name} ({file.size / 1024}kb)
//             </span>
//         </div>
//     ));

//     // clean up
//     useEffect(
//         () => () => {
//             files.forEach((file) => URL.revokeObjectURL(file.preview));
//         },
//         [files]
//     );

//     const onChangeFile = (e) => {
//         const {
//             input: { onChange },
//         } = props;
//         onChange(e.target.files[0]);
//     };
//     return (
//         <div className="govuk-grid-row">
//             <div className="govuk-form-group"></div>
//             <section className="container">
//                 <div {...getRootProps({ style })}>
//                     <input {...getInputProps()} />
//                     <div>Drag and drop your images here.</div>
//                 </div>
//             </section>{" "}
//             <aside>{thumbs}</aside>
//             {touched && errorStr && <span>{errorStr}</span>}
//         </div>
//     );
// };

const RenderFileUpload = (field) => {
    const files = field.input.value;
    const style = useMemo(
        () => ({
            ...baseStyle,
            // ...(isDragActive ? activeStyle : {}),
            // ...(isDragAccept ? acceptStyle : {}),
            // ...(isDragReject ? rejectStyle : {}),
        }),
        []
        // [isDragActive, isDragReject, isDragAccept]
    );
    const [filesList, setFilesList] = useState([]);

    const thumbs = filesList.map((file) => (
        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
            <img src={file.preview} alt={file.name} width="50" /> -{" "}
            <span className="govuk-body">
                {file.name} ({file.size / 1024}kb)
            </span>
        </div>
    ));

    function bytesToSize(bytes) {
        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes == 0) return "0 Byte";
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
    }

    const getThumbnailIcon = (fileObj, fileType) => {
        switch (fileType) {
            case "text/html":
                return "/assets/images/documentTypes/html.png";
                break;
            case "text/plain":
                return "/assets/images/documentTypes/txt.png";
                break;
            case "application/msword":
                return "/assets/images/documentTypes/doc.png";
                break;
            case "application/pdf":
                return "/assets/images/documentTypes/pdf.png";
                break;
            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                return "/assets/images/documentTypes/docx.png";
                break;
            case "text/csv":
                return "/assets/images/documentTypes/csv.png";
                break;
            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                return "/assets/images/documentTypes/xlsx.png";
                break;

            case "application/zip":
                return "/assets/images/documentTypes/zip.png";
                break;
            case "image/jpeg":
            case "image/png":
                return URL.createObjectURL(fileObj);
                break;
        }
    };
    return (
        <div>
            <Dropzone
                onDrop={(filesToUpload, e) =>
                    field.input.onChange(filesToUpload)
                }
            >
                {({ getRootProps, getInputProps }) => (
                    <div className="govuk-grid-row">
                        <div className="govuk-form-group"></div>
                        <section className="container">
                            <div {...getRootProps({ style })}>
                                {" "}
                                <input {...getInputProps()} />
                                <div>Drag and drop your files here.</div>
                            </div>
                            <aside>{thumbs}</aside>
                        </section>
                    </div>
                )}
            </Dropzone>

            {field.meta.touched && field.meta.error && (
                <span className="error">{field.meta.error}</span>
            )}
            {files && Array.isArray(files) && (
                <ul>
                    {files.map((file, i) => (
                        <div
                            key={file.name}
                            className="govuk-!-margin-bottom-5 fileThumb"
                        >
                            <img
                                src={getThumbnailIcon(file, file.type)}
                                alt={file.name}
                                width="50"
                            />{" "}
                            {"  "}
                            <span className="govuk-body govuk-!-padding-left-5">
                                {file.name} ({bytesToSize(file.size)})
                            </span>
                        </div>
                    ))}
                </ul>
            )}
        </div>
    );
};