import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import "react-datepicker/dist/react-datepicker.css";
import { Field } from "redux-form";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";

import "react-quill-new/dist/quill.snow.css";

import { validateField } from "./validationUtils"; // Import the validation function
import { getFieldTranslation } from "./helpers/translationHelpers";
import { RenderRichMultiline } from "./fields/renderRichMultiline";
import { RenderTextfield } from "./fields/renderTextfield";
import { RenderMultiline } from "./fields/renderMultiline";
import { RenderRadio } from "./fields/renderRadio";
import { PickList } from "./fields/pickListField";
import { CheckBoxfield } from "./fields/checkBoxField";
import { DateFieldPicker } from "./fields/dateFieldPicker";
import { YesNofield } from "./fields/yesNoField";
import { RenderDecimalField } from "./fields/renderDecimalField";
import { RenderFileUpload } from "./fields/renderFileUpload";
export { RenderSubFields } from "./fields/renderSubFields";
export { FieldArrayForm } from "./fields/fieldArrayForm";
export { PickList };
export { CheckBoxfield };
export { DateFieldPicker };
export { YesNofield };

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

const hasParentFieldValue = ({ parentField, form, formProps }) =>
    parentField != false &&
    !_.isEmpty(formProps[form]) &&
    _.has(formProps[form].values, parentField);

const isVisibleByEquality = ({
    parentField,
    form,
    formProps,
    parentFieldShowOnValue
}) =>
    (hasParentFieldValue({ parentField, form, formProps }) &&
        formProps[form].values[parentField]) == parentFieldShowOnValue;

const isVisibleByInclusion = ({
    parentField,
    form,
    formProps,
    parentFieldShowOnValue
}) =>
    hasParentFieldValue({ parentField, form, formProps }) &&
    parentFieldShowOnValue.indexOf(
        formProps[form].values[parentField].toString()
    ) > -1;

export function Textfield(props) {
    const {
        name,
        label,
        validation,
        ticketnumber,
        form,
        formProps,
        parentField,
        parentFieldShowOnValue,
        maxFieldLength,
        hint
    } = props;

    let { t } = useTranslation();

    if (name == "pinswg_name") {
        return (
            <>
                <div className="govuk-form-group">
                    <label className="govuk-label " htmlFor={props.name}>
                        {FieldsTranslations(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">
                    <p>{t("newappeal:new-appeal-introduction-paragraph")}</p>
                    <ul>
                        <li>
                            {t(
                                "newappeal:new-appeal-introduction-paragraph-bullet-one"
                            )}
                        </li>
                        <li>
                            {t(
                                "newappeal:new-appeal-introduction-paragraph-bullet-two"
                            )}
                        </li>
                    </ul>
                    <p>
                        {t("newappeal:new-appeal-introduction-paragraph-two")}
                    </p>

                    <p>
                        {t(
                            "newappeal:new-appeal-introduction-warning-paragraph"
                        )}
                    </p>
                    <ul>
                        <li>
                            {t(
                                "newappeal:new-appeal-introduction-warning-bullet-one"
                            )}
                        </li>
                        <li>
                            {t(
                                "newappeal:new-appeal-introduction-warning-bullet-two"
                            )}
                        </li>
                    </ul>
                </div>
            </>
        );
    } else {
        var showIfHasParentShowValue = isVisibleByEquality({
            parentField,
            form,
            formProps,
            parentFieldShowOnValue
        });

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

        //console.log("validation props:", validation);
        const {
            requiredMessage,
            emojiNotAllowedMessage,
            invalidPostcodeMessage
        } = getValidationMessages(t);
        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={(value) =>
                                validateField(
                                    value,
                                    validation,
                                    requiredMessage,
                                    emojiNotAllowedMessage,
                                    invalidPostcodeMessage
                                )
                            } // Use the external validate function
                            label={props.label}
                            maxFieldLength={props.maxFieldLength}
                        />
                    )
                ) : (
                    <Field
                        name={props.name}
                        id={props.name}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        } // Use the external validate function
                        label={props.label}
                        errorMsg={t("newappeal:is-required-label")}
                        maxFieldLength={props.maxFieldLength}
                    />
                )}
            </div>
        );
    }
}

export function MultiLinefield(props) {
    const {
        name,
        label,
        form,
        formProps,
        parentField,
        parentFieldShowOnValue,
        validation,
        maxFieldLength,
        hint
    } = props;

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

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
    let { t } = useTranslation();
    const translatedLabel = FieldsTranslations(props.label);

    const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
        getValidationMessages(t);
    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <div>
                        <label className="govuk-label" htmlFor={props.name}>
                            {translatedLabel}
                        </label>

                        <div
                            id={props.name + "-hint"}
                            className="govuk-hint govuk-!-font-size-14"
                        >
                            {props.hasOwnProperty("hint") &&
                                props.hint != false &&
                                t(props.hint)}{" "}
                            <br />
                            {t("newappeal:new-appeal-multiline-pid")}
                        </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={(value) =>
                                validateField(
                                    value,
                                    validation,
                                    requiredMessage,
                                    emojiNotAllowedMessage,
                                    invalidPostcodeMessage
                                )
                            } // Use the external validate function
                            maxFieldLength={props.maxFieldLength}
                        />
                    </div>
                )
            ) : (
                <div className="govuk-form-group">
                    <label className="govuk-label" htmlFor={props.name}>
                        {translatedLabel}
                    </label>
                    <div
                        id={props.name + "-hint"}
                        className="govuk-hint govuk-!-font-size-14"
                    >
                        {props.hasOwnProperty("hint") &&
                            props.hint != false &&
                            t(props.hint)}{" "}
                        <br />
                        {t("newappeal:new-appeal-multiline-pid")}
                    </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={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        } // Use the external validate function
                        maxFieldLength={props.maxFieldLength}
                    />
                </div>
            )}
        </>
    );
}

export function RichMultiLinefield(props) {
    const {
        name,
        label,
        form,
        formProps,
        parentField,
        parentFieldShowOnValue,
        validation,
        maxFieldLength
    } = props;
    var showIfHasParentShowValue = isVisibleByInclusion({
        parentField,
        form,
        formProps,
        parentFieldShowOnValue
    });

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
    let { t } = useTranslation();
    const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
        getValidationMessages(t);
    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <div>
                        <label className="govuk-label" htmlFor={props.name}>
                            {FieldsTranslations(props.label)}
                        </label>
                        <div
                            id={props.name + "-hint"}
                            className="govuk-hint govuk-!-font-size-14"
                        >
                            {props.hasOwnProperty("hint") &&
                                props.hint != false &&
                                t(props.hint)}{" "}
                            <br />
                            {t("newappeal:new-appeal-multiline-pid")}
                        </div>
                        <Field
                            name={props.name}
                            id={props.name}
                            component={RenderRichMultiline}
                            type="text"
                            rows="5"
                            className="govuk-textarea govuk-input--width-30"
                            aria-describedby={props.name + "-hint"}
                            validate={(value) =>
                                validateField(
                                    value,
                                    validation,
                                    requiredMessage,
                                    emojiNotAllowedMessage,
                                    invalidPostcodeMessage
                                )
                            } // Use the external validate function
                            maxFieldLength={props.maxFieldLength}
                        />
                    </div>
                )
            ) : (
                <div className="govuk-form-group">
                    <label className="govuk-label" htmlFor={props.name}>
                        {FieldsTranslations(props.label)}
                    </label>
                    <div
                        id={props.name + "-hint"}
                        className="govuk-hint govuk-!-font-size-14"
                    >
                        {props.hasOwnProperty("hint") &&
                            props.hint != false &&
                            t(props.hint)}{" "}
                        <br />
                        {t("newappeal:new-appeal-multiline-pid")}
                    </div>

                    <Field
                        name={props.name}
                        id={props.name}
                        component={RenderRichMultiline}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                        validate={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        } // Use the external validate function
                        maxFieldLength={props.maxFieldLength}
                    />
                </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>
    );
}

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

    const router = useRouter();
    // console.log(props.options);
    let { t } = useTranslation();

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

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

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
        getValidationMessages(t);
    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        datafieldname={datafieldname}
                        label={label}
                        options={fieldOptions}
                        id={name}
                        //validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                        component={RenderRadio}
                        inline={props.inline}
                        hint={props.hint}
                        validate={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        } // Use the external validate function
                        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={t("newappeal:select-an-option-label")}
                    component={RenderRadio}
                    inline={props.inline}
                    hint={props.hint}
                    validate={(value) =>
                        validateField(
                            value,
                            validation,
                            requiredMessage,
                            emojiNotAllowedMessage,
                            invalidPostcodeMessage
                        )
                    } // Use the external validate function
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}

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

    let { t } = useTranslation();

    const required = (value) => {
        return value || value == 0
            ? undefined
            : t("newappeal:is-required-label");
    };
    const isNumber = (value) => {
        const regex = /^\d+$/;
        return regex.test(value)
            ? undefined
            : t("newappeal:invalid-number-label");
    };

    const maxLength = (max) => (value) =>
        value && value.length > max
            ? `Must be ${max} characters or less`
            : undefined;

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

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    //console.log("parentField:", parentField, showIfHasParentShowValue);
    const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
        getValidationMessages(t);
    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <div className="govuk-form-group">
                        <Field
                            name={props.name}
                            id={props.name}
                            type="number"
                            className="govuk-input  govuk-input--width-20"
                            spellCheck="false"
                            aria-describedby={name}
                            pattern="[0-9]*"
                            inputMode="numeric"
                            parse={Number}
                            validate={(value) =>
                                validateField(
                                    value,
                                    validation,
                                    requiredMessage,
                                    emojiNotAllowedMessage,
                                    invalidPostcodeMessage
                                )
                            } // Use the external validate function
                            component={RenderTextfield}
                            label={label}
                            maxFieldLength={props.maxFieldLength}
                        />
                    </div>
                )
            ) : (
                <div className="govuk-form-group">
                    <Field
                        // name={props.name}
                        // id={props.name}
                        // type="text"
                        // className="govuk-input  govuk-input--width-20 wwwww"
                        // aria-describedby={name}
                        // //pattern="^\d*\.?\d+$"
                        // pattern="[0-9]*"
                        // // inputMode="numeric"
                        // // parse={Number}
                        // validate={[
                        //     required,
                        //     // isNumber,
                        //     maxLength(props.maxFieldLength),
                        // ]}
                        // component={RenderTextfield}
                        // label={label}
                        // // normalize={(value) => parseInt(value)}
                        // maxFieldLength={props.maxFieldLength}

                        name={props.name}
                        id={props.name}
                        type="text"
                        className="govuk-input govuk-input--width-10"
                        aria-describedby={name}
                        //pattern="^\d*\.?\d+$"
                        pattern="[0-9]*"
                        validate={[
                            required,
                            isNumber,
                            maxLength(props.maxFieldLength)
                        ]}
                        component={RenderTextfield}
                        label={props.label}
                        maxFieldLength={props.maxFieldLength}
                    />
                </div>
            )}
        </>
    );
}

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

    let { t } = useTranslation();

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

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    //console.log("parentField:", parentField, showIfHasParentShowValue);

    const validateDecimal = (value) => {
        if (!value) return t("newappeal:is-required-label");

        // Regex to match whole numbers or decimal numbers (up to 7 characters including decimal)
        const regex = /^\d{1,6}(\.\d{1,2})?$/; // Up to 6 digits before the decimal, 2 after

        // Check if the value matches the regex pattern
        if (!regex.test(value)) {
            return t("newappeal:invalid-decimal-label");
        }

        return undefined;
    };

    const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
        getValidationMessages(t);
    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <div className="govuk-form-group">
                        <Field
                            name={props.name}
                            id={props.name}
                            // component="input"
                            type="number"
                            className="govuk-input govuk-input--width-10"
                            spellCheck="false"
                            aria-describedby={name}
                            pattern="[0-9]*"
                            inputMode="numeric"
                            parse={Number}
                            validate={(value) =>
                                validateField(
                                    value,
                                    validation,
                                    requiredMessage,
                                    emojiNotAllowedMessage,
                                    invalidPostcodeMessage
                                )
                            } // Use the external validate function
                            component={RenderTextfield}
                            label={props.label}
                            maxFieldLength={props.maxFieldLength}
                        />
                    </div>
                )
            ) : (
                <div className="govuk-form-group">
                    <Field
                        name={props.name}
                        id={props.name}
                        // component="input"
                        type="text"
                        className="govuk-input govuk-input--width-10"
                        spellCheck="false"
                        aria-describedby={name}
                        pattern="^\d*\.?\d+$"
                        // inputMode="numeric"
                        // parse={Number}
                        validate={[validateDecimal]}
                        component={RenderDecimalField}
                        label={props.label}
                        maxFieldLength={props.maxFieldLength}
                        // normalize={normalizeDecimal} // Normalizing input as float
                    />
                </div>
            )}
        </>
    );
}

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;

    return getFieldTranslation({
        label,
        locale,
        appealtypes,
        fieldLookup
    });
};

export function FileUploadField(props) {
    return (
        <>
            <h2 className="govuk-heading-s">
                {FieldsTranslations(props.label)}{" "}
            </h2>
            <Field
                name={props.name}
                id={props.name}
                component={RenderFileUpload}
                className="govuk-input govuk-input--width-20"
                //validate={[required]}
                label={props.label}
                errorMsg="Is required"
                ticketnumber={props.ticketnumber}
                documentTypeCode={props.documentTypeCode}
                hint={props.hint}
                fileList={props.fileList}
                setFilesForAppeal={props.setFilesForAppeal}
                containerID={props.containerID}
                uploadCount={props.uploadCount}
                setFileCount={props.setFileCount}
                props={props.props}
            />
        </>
    );
}