import useTranslation from "next-translate/useTranslation";
import dynamic from "next/dynamic";
import Link from "next/link";
import router from "next/router";
import React, { useMemo, useState, useRef } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import Dropzone from "react-dropzone";
import "react-quill-new/dist/quill.snow.css";
import { Field, change } from "redux-form";
import {
    uploadSingleFile,
    deleteBlob,
    deleteRepBlob,
    getFilesFromBlobHashed,
    getFilesFromBlobproxy,
} from "../../../actions";

const LoadingMessage = () => <div>Loading the editor...</div>;

// Dynamically import ReactQuill with a proper loading state
const ReactQuill = dynamic(
    () => import("react-quill-new").then((mod) => mod.default),
    {
        ssr: false,
        loading: () => <LoadingMessage />, // This is valid as long as it's a valid React component
    }
);
import { useDispatch } from "react-redux"; // Import the useDispatch hook

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

import {
    bytesToSize,
    getThumbnailIconByExtension,
    updateLinks,
} from "../../utils";

import { useRouter } from "next/router";

export const RenderRadioList = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");

    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"}
                        >
                            {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 == true
                                ? "govuk-radios govuk-radios--inline govuk-radios--small"
                                : "govuk-radios 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]}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export const RenderRadioListWithText = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");
    const router = useRouter();

    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"}
                        >
                            {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 == true
                                ? "govuk-radios govuk-radios--inline govuk-radios--small "
                                : "govuk-radios govuk-radios--small govuk-grid-column-full conditionalText"
                        }
                    >
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-radios__item govuk-grid-column-full"
                                data-children-count={key}
                                key={key}
                            >
                                <div className="govuk-grid-column-full conditionalElement">
                                    <Field
                                        id={id + "_" + index}
                                        name={id}
                                        component="input"
                                        type="radio"
                                        className="govuk-radios__input"
                                        value={options[key]}
                                    />
                                    <label
                                        className="govuk-label govuk-radios__label"
                                        htmlFor={id + "_" + index}
                                    >
                                        {options[key]}
                                    </label>
                                </div>
                                {value === options[key] && (
                                    <div
                                        className="govuk-radios__conditional "
                                        id={"conditional_" + id + "_" + index}
                                    >
                                        <div className="govuk-form-group">
                                            <Field
                                                name={
                                                    "conditional_" +
                                                    id +
                                                    "_Comments"
                                                }
                                                id={
                                                    "conditional_" +
                                                    id +
                                                    "_Comments"
                                                }
                                                label={
                                                    router.locale == "en"
                                                        ? "Please give further details if required"
                                                        : "Rhowch fanylion pellach os oes angen"
                                                }
                                                component={RenderRichMultiline}
                                                type="text"
                                                rows="5"
                                                className="govuk-textarea govuk-input--width-30"
                                                aria-describedby={
                                                    id + "_" + index + "-hint"
                                                }
                                            />
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export const RenderCondtionalRadioList = ({
    datafieldname,
    legend,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");
    let { t } = useTranslation();
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={id + "-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"}
                        >
                            {label}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}

                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {legend}
                        </label>
                    </legend>

                    <div id={id + "-hint"} className="govuk-hint">
                        {custom.hint}
                    </div>
                    <div className="govuk-radios">
                        {Object.keys(options).map((key, index) => (
                            <div key={key} className="govuk-!-margin-bottom-3">
                                <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]}
                                        validate={[required]}
                                    />
                                    <label
                                        className="govuk-label govuk-radios__label"
                                        htmlFor={id + "_" + index}
                                    >
                                        {options[key] == "Yes"
                                            ? t(
                                                  "myrepresentations:questionnaire-yes"
                                              )
                                            : t(
                                                  "myrepresentations:questionnaire-no"
                                              )}
                                    </label>
                                </div>
                                {value == "Yes" && options[key] == "Yes" && (
                                    <div
                                        className="govuk-radios__conditional "
                                        id={"conditional-" + id}
                                    >
                                        <div
                                            className="govuk-form-group"
                                            key={"yes_group_" + key}
                                        >
                                            <label
                                                className="govuk-label"
                                                htmlFor={id + "_details"}
                                            >
                                                {t(
                                                    "myrepresentations:representation-onbehalfof-label"
                                                )}
                                            </label>
                                            <Field
                                                className="govuk-input govuk-!-width-one-half"
                                                id={id + "_details"}
                                                name={id + "_details"}
                                                component={RenderTextfield}
                                                type="text"
                                                validate={[required]}
                                                errorMsg={t(
                                                    "myrepresentations:is-required-label"
                                                )}
                                            />
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export const RenderLPACondtionalRadioList = ({
    datafieldname,
    legend,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");
    let { t } = useTranslation();

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={id + "-hint"}
                >
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}

                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                        <label className=" govuk-body-m" id={id + "_label"}>
                            {legend}
                        </label>
                    </legend>

                    {typeof custom.hint != undefined && (
                        <div
                            className="govuk-hint govuk-!-font-size-14"
                            id={id + "-hint"}
                        >
                            {custom.hint}
                        </div>
                    )}

                    <div className="govuk-radios govuk-radios--small">
                        {Object.keys(options).map((key, index) => (
                            <div key={key} className="govuk-!-margin-bottom-3">
                                <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]}
                                        // validate={[required]}
                                    />
                                    <label
                                        className="govuk-label govuk-radios__label"
                                        htmlFor={id + "_" + index}
                                    >
                                        {options[key]}
                                    </label>
                                </div>
                                {value == custom.optionSelect &&
                                    options[key] == custom.optionSelect && (
                                        <div
                                            className="govuk-radios__conditional "
                                            id={id}
                                        >
                                            <div
                                                className="govuk-form-group"
                                                key={"yes_group_" + key}
                                            >
                                                <label
                                                    className="govuk-label"
                                                    htmlFor={id + "_details"}
                                                >
                                                    {custom.conditionalLabel}
                                                </label>
                                                <Field
                                                    className="govuk-input govuk-!-width-one-half"
                                                    id={id + "Evidence"}
                                                    name={id + "Evidence"}
                                                    component={RenderMultiline}
                                                />
                                            </div>
                                        </div>
                                    )}
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

export const RenderPickList = ({
    datafieldname,
    name,
    label,
    input,
    optionsArr,
    meta: { touched, error },
    errorMsg,
    ...custom
}) => {
    // console.log(custom.disabled);
    let { t } = useTranslation();

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label" htmlFor={datafieldname}>
                    {label}
                </label>
                {touched && error && (
                    <span id={name + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {errorMsg}
                    </span>
                )}

                <div>
                    <select
                        {...input}
                        className="govuk-select "
                        id={name}
                        name={name}
                        disabled={custom.disabled}
                        // onChange={onChange}
                    >
                        <option value="" disabled defaultValue>
                            {t("common:drop-down-select")}
                        </option>
                        {Object.keys(optionsArr).map((key, index) => {
                            return (
                                <option key={key} value={optionsArr[key]}>
                                    {router.locale == "cy"
                                        ? optionsArr[key] == "Questionnaire"
                                            ? "Holiadur"
                                            : optionsArr[key] == "Statement"
                                            ? "Datganiad"
                                            : optionsArr[key] ==
                                              "Final comments"
                                            ? "Sylwadau terfynol"
                                            : optionsArr[key] ==
                                              "Written representations"
                                            ? "Sylwadau ysgrifenedig"
                                            : optionsArr[key] == "Inquiry"
                                            ? "Ymchwiliad"
                                            : optionsArr[key] == "Hearing"
                                            ? "Gwrandawiad"
                                            : optionsArr[key]
                                        : optionsArr[key]}
                                </option>
                            );
                        })}
                    </select>
                </div>
            </div>
        </>
    );
};

export const RenderTextfield = ({
    id,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    type,
    className,
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {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}
                    type={type}
                    disabled={custom.disabled == true ? true : false}
                />
            </div>
        </>
    );
};

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

    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={id + "_label"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading"
                            id={id + "_label"}
                            htmlFor={id}
                        >
                            {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={custom.locale}
                        autoOk={true}
                        id={id}
                        dateFormat="dd/MM/yyyy"
                        onChange={onChange}
                        selected={
                            value
                                ? typeof value != "object"
                                    ? parseISO(value)
                                    : value
                                : null
                        } //{parseISO(value) || null}
                        className="govuk-input govuk-input--width-10"
                        minDate={minDate}
                        maxDate={maxDate}
                        autoComplete="off"
                        //value={!value ? null : moment(value, "DD/MM/yyyy")}
                    />
                </fieldset>
            </div>
        </>
    );
};

export const RenderMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    meta: { touched, error },
    ...custom
}) => {
    const [editValue, setEditValue] = useState(
        input.value != null ? input.value : ""
    );

    const changeEdit = (valStr) => {
        setEditValue(valStr);
        input.onChange(valStr);
    };

    var modules = {
        toolbar: [
            [{ "header": [1, 2, false] }],
            ["bold", "italic", "underline", "blockquote"],
            [{ "list": "ordered" }, { "list": "bullet" }],
            ["clean"],
        ],
    };

    return (
        <>
            <div className="govuk-form-group ">
                <label className="govuk-label" htmlFor={datafieldname}>
                    {label}
                </label>
                {"hint" in custom}

                {"hint" in custom && (
                    <div
                        id={datafieldname + "-hint"}
                        className="govuk-hint govuk-!-font-size-14"
                    >
                        {custom.hint}
                    </div>
                )}
                <ReactQuill
                    modules={modules}
                    theme="snow"
                    value={editValue}
                    onChange={changeEdit}
                />
                <textarea
                    {...input}
                    id={id}
                    name={name}
                    rows={rows}
                    className={className}
                    value={editValue}
                    style={{ display: "none" }}
                ></textarea>
            </div>
        </>
    );
};

export const RenderRichMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    meta: { touched, error },
    ...custom
}) => {
    const [editValue, setEditValue] = useState(
        input.value != null ? input.value : ""
    );

    const changeEdit = (valStr) => {
        valStr = updateLinks(valStr);
        setEditValue(valStr);
        input.onChange(valStr);
    };

    var modules = {
        toolbar: [
            [{ "header": [1, 2, false] }],
            ["bold", "italic", "underline", "blockquote"],
            [{ "list": "ordered" }, { "list": "bullet" }],
            ["clean"],
        ],
    };

    return (
        <>
            <label className="govuk-label" htmlFor={name}>
                {label}
            </label>
            <ReactQuill
                modules={modules}
                theme="snow"
                value={editValue}
                onChange={changeEdit}
            />
            <textarea
                {...input}
                id={id}
                name={name}
                rows={rows}
                className={className}
                value={editValue}
                style={{ display: "none" }}
            ></textarea>
        </>
    );
};

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

    return (
        <div className="govuk-form-group">
            <label className="govuk-label" htmlFor={props.name}>
                {props.label}
            </label>
            <div
                id={props.name + "-hint"}
                className="govuk-hint govuk-!-font-size-14"
            >
                Do not include personal or financial information, like your
                National Insurance number or credit card details.
            </div>

            <Field
                name={props.name}
                id={props.name}
                component={RenderMultiline}
                type="text"
                rows="5"
                validate={[required]}
                className="govuk-textarea govuk-input--width-30"
                aria-describedby={props.name + "-hint"}
            />
        </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",
};

export const RenderFileUpload = (field) => {
    const files = field.input.value;
    const dispatch = useDispatch(); // Get dispatch using useDispatch hook

    let { t } = useTranslation();

    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>
    ));

    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;
            default:
                return "/assets/images/documenttypes/default.png";
                break;
        }
    };

    const filelistObj = field.fileList || {};

    let blobList = filelistObj;

    //let blobList = field.props.currentView.fileList;

    function removeNullObjects(arr) {
        if (arr.length === 0) {
            return arr;
        }
        return arr.filter((obj) => obj !== null);
    }

    function removeObjectsWithUndefinedKey(arr, key) {
        if (arr.length === 0) {
            return arr;
        }
        return arr.filter((obj) => obj[key] !== undefined);
    }

    function removeEmptyObjects(arr) {
        if (arr.length === 0) {
            return arr;
        }
        return arr.filter(
            (obj) =>
                obj && typeof obj === "object" && Object.keys(obj).length > 0
        );
    }

    //blobList = removeEmptyObjects(blobList);
    //blobList = removeObjectsWithUndefinedKey(blobList, "name");
    //blobList = removeNullObjects(blobList);

    let buildAppealFilesArray = [];

    let filesUploadObj = field.input.value;

    for (let key in filesUploadObj) {
        typeof filesUploadObj[key].name != "undefined" &&
            buildAppealFilesArray.push({
                "name": filesUploadObj[key].name,
                "size": filesUploadObj[key].size,
            });
    }

    //buildAppealFilesArray = buildAppealFilesArray.concat(blobList);

    function removeDuplicates(arr) {
        const seen = new Set();
        return arr.filter((obj) => {
            const serializedObj = JSON.stringify(obj);
            if (seen.has(serializedObj)) {
                return false; // Skip this object (duplicate)
            }
            seen.add(serializedObj); // Add the serialized object to the "seen" set
            return true; // Keep this object
        });
    }

    buildAppealFilesArray = removeDuplicates(buildAppealFilesArray);

    //blobList = buildAppealFilesArray;

    const deleteThisBlob = async (
        containerName,
        blobName,
        deleteblobhash,
        getblobshash,
        casefolderID,
        filenamePrefix
    ) => {
        deleteRepBlob(
            containerName,
            blobName,
            deleteblobhash,
            casefolderID,
            filenamePrefix
        )
            .then((data) => data)
            .then(() => {
                getFilesFromBlobHashed(
                    containerName,
                    getblobshash,
                    casefolderID + "/" + filenamePrefix
                ).then((newfilelist) =>
                    field.setFilesForRepresentations(newfilelist.value[0])
                );
            });
    };

    const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
    const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
    const [uploadCountMessage, setUploadCountMessage] = useState("");

    const handleDropRejected = (fileRejections) => {
        const errors = fileRejections
            .map(({ file, errors }) => {
                return errors.map((error) => {
                    if (error.code === "file-too-large") {
                        return `${file.name} ${t(
                            "myrepresentations:fileupload-file-error-filesize-label"
                        )}`;
                    }
                    if (error.code === "file-invalid-type") {
                        return `${file.name} ${t(
                            "myrepresentations:fileupload-file-error-invalid-type-label"
                        )}`;
                    }
                    return `${file.name} ${t(
                        "myrepresentations:fileupload-file-error-invalid-label"
                    )}`;
                });
            })
            .flat(); // Flatten the errors array

        setRejectedFiles(errors); // Store the error messages for rejected files
    };

    // Handle accepted files (clear error message when files are accepted)
    const handleDropAccepted = () => {
        setRejectedFiles([]); // Clear any previously rejected file errorsss
    };

    return (
        <>
            <Dropzone
                maxSize={50 * 1024 * 1024}
                accept={{
                    "application/pdf": [".pdf"],
                    "application/msword": [".doc"],
                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                        [".docx"],
                    "image/tiff": [".tif", ".tiff"],
                    "image/jpeg": [".jpg", ".jpeg"],
                    "application/zip": [".zip"],
                    "image/png": [".png"],
                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                        [".xlsx"],
                }}
                onDrop={(filesToUpload, e) => {
                    setCompletedUploadFiles(false);
                    const renamedAcceptedFiles = filesToUpload.map(
                        (file) =>
                            new File(
                                [file],
                                `${
                                    field.filenamePrefix.hasOwnProperty(
                                        "representationForm"
                                    ) &&
                                    field.filenamePrefix.representationForm.hasOwnProperty(
                                        "values"
                                    ) &&
                                    field.filenamePrefix.representationForm.values.hasOwnProperty(
                                        "repfile_name"
                                    ) &&
                                    field.filenamePrefix.representationForm
                                        .values.repfile_name
                                }_-_Attachment_-_${file.name}`,
                                {
                                    type: file.type,
                                }
                            )
                    );
                    field.input.onChange(renamedAcceptedFiles);
                    setUploadCountMessage(renamedAcceptedFiles.length);

                    uploadSingleFile(
                        renamedAcceptedFiles,
                        field.containerID,
                        field.ticketnumber +
                            "/" +
                            field.filenamePrefix.representationForm.values
                                .repfile_name
                    ).then((data) => {
                        console.log(data);
                        let buildAppealFilesArray = [];
                        let values = field;
                        let filesUploadObj = renamedAcceptedFiles;

                        for (let key in filesUploadObj) {
                            typeof filesUploadObj[key].name != "undefined" &&
                                buildAppealFilesArray.push({
                                    "name": filesUploadObj[key].name,
                                    "size": filesUploadObj[key].size,
                                });
                        }

                        //console.log(buildAppealFilesArray);
                        function removeDuplicates(arr, key) {
                            const seen = new Set();
                            return arr.filter((item) => {
                                const value = item[key];
                                if (seen.has(value)) {
                                    return false; // Duplicate found
                                } else {
                                    seen.add(value); // Add value to the set
                                    return true; // Keep the item
                                }
                            });
                        }

                        buildAppealFilesArray = values.hasOwnProperty(
                            "fileList"
                        )
                            ? buildAppealFilesArray.concat(values.fileList)
                            : buildAppealFilesArray;

                        buildAppealFilesArray = removeDuplicates(
                            buildAppealFilesArray,
                            "name"
                        );

                        // Object.assign(values, {
                        //     "fileList": buildAppealFilesArray,
                        // });
                        getFilesFromBlobproxy(
                            field.containerID,
                            field.ticketnumber +
                                "/" +
                                (typeof field.filenamePrefix != "object"
                                    ? field.filenamePrefix
                                    : encodeURIComponent(
                                          field.filenamePrefix
                                              .representationForm.values
                                              .repfile_name
                                      ))
                        ).then((data) => {
                            data = data.value || {};
                            field.input.value = "";
                            field.setFilesForRepresentations(data[0]);
                            setCompletedUploadFiles(true);

                            dispatch(
                                change("representationForm", field.name, null)
                            ); // Set the field value to null
                        });
                    });
                }}
                onDropRejected={handleDropRejected}
                onDropAccepted={handleDropAccepted}
            >
                {({ getRootProps, getInputProps }) => (
                    <>
                        <section className="container">
                            <div {...getRootProps({ style })}>
                                {" "}
                                <input id={field.id} {...getInputProps()} />
                                <div>
                                    {t(
                                        "myrepresentations:fileupload-drop-label"
                                    )}
                                    (Max 50 MB)
                                </div>
                                <em>
                                    (
                                    {t(
                                        "myrepresentations:fileupload-file-list-label"
                                    )}
                                    )
                                </em>
                            </div>
                            <aside>{thumbs}</aside>
                            {uploadCountMessage > 0 &&
                                completedUploadFiles == false && (
                                    <div className="govuk-body govuk-!-font-size-14">
                                        {t("home:uploading-files-label", {
                                            number: uploadCountMessage,
                                        })}
                                    </div>
                                )}
                            {completedUploadFiles > 0 &&
                                uploadCountMessage > 0 && (
                                    <div className="govuk-body govuk-!-font-size-14">
                                        {t(
                                            "home:completed-uploading-files-label",
                                            {
                                                number: uploadCountMessage,
                                            }
                                        )}
                                    </div>
                                )}
                        </section>
                    </>
                )}
            </Dropzone>
            {rejectedFiles.length > 0 && (
                <div style={{ color: "red", marginTop: "10px" }}>
                    <ul>
                        {rejectedFiles.map((error, index) => (
                            <li key={index}>{error}</li>
                        ))}
                    </ul>
                </div>
            )}
            {field.meta.touched && field.meta.error && (
                <span className="error">{field.meta.error}</span>
            )}
            {!completedUploadFiles &&
                filesUploadObj &&
                Array.isArray(filesUploadObj) &&
                filesUploadObj.map(
                    (file, i) =>
                        typeof file.name != "undefined" && (
                            <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-!-font-size-14 govuk-!-padding-left-5">
                                    {file.name} ({bytesToSize(file.size)}
                                    )<br />
                                    <div id={file.name + "_" + i}>
                                        {completedUploadFiles ? (
                                            <p className="govuk-body govuk-!-font-size-14">
                                                Upload complete
                                            </p>
                                        ) : (
                                            <p className="govuk-body textloading govuk-!-font-size-14">
                                                {t(
                                                    "home:uploading-files-progress-label"
                                                )}
                                            </p>
                                        )}
                                    </div>
                                </span>
                            </div>
                        )
                )}
            {blobList.length > 0 && (
                <h4>{t("myrepresentations:previously-added-files")}</h4>
            )}
            {blobList.map((blob, i) => (
                <div
                    key={blob.name + "_" + i}
                    className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
                >
                    <span
                        className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
                        onClick={() => {
                            setUploadCountMessage(uploadCountMessage - 1);
                            deleteThisBlob(
                                field.containerID,
                                blob.name,
                                blob.hasheddeletepath,
                                blob.hashgetblobs,
                                field.ticketnumber,
                                blob.path.split("/")[1]
                            );
                        }}
                        title={t("home:remove-this-file-label")}
                    >
                        &minus;
                    </span>

                    <img
                        src={getThumbnailIconByExtension(blob.name)}
                        alt={blob.name}
                        width="50"
                    />
                    <Link
                        key={i}
                        scroll={false}
                        href={
                            "/api/file/downloadblob?container=" +
                            field.containerID +
                            "&casefolderID=" +
                            encodeURIComponent(
                                field.ticketnumber +
                                    "/" +
                                    field.filenamePrefix.representationForm
                                        ?.values?.repfile_name
                            ) +
                            "&blobname=" +
                            blob.name +
                            blob.hashedfilepath
                        }
                        className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link"
                    >
                        {blob.name} (
                        {bytesToSize(blob.contentLength || blob.size)})
                    </Link>
                </div>
            ))}{" "}
        </>
    );
};

export function FileUploadField(props) {
    return (
        <>
            <h2 className="govuk-heading-s">{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}
                hint={props.hint}
                fileList={props.fileList}
                setFilesForRepresentations={props.setFilesForRepresentations}
                containerID={props.containerID}
                filenamePrefix={
                    props.filenamePrefix.hasOwnProperty("representationForm") &&
                    props.filenamePrefix.representationForm.hasOwnProperty(
                        "values"
                    ) &&
                    props.filenamePrefix.representationForm.values.hasOwnProperty(
                        "repfile_name"
                    )
                        ? props.filenamePrefix.representationForm.values
                              .repfile_name
                        : props.filenamePrefix.hasOwnProperty("formObj")
                        ? props.filenamePrefix.formObj["representationForm"]
                              .values.repfile_name
                        : ""
                }
                props={props}
            />
        </>
    );
}

// export const RepresentationGuidanceText = (appealType) => {
//     let { t } = useTranslation();

//     console.log(appealType);
//     switch (appealType) {
//         case "846040004": //has/cas
//             return (
//                 <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
//                     {t("myrepresentations:questionnaire-publish-policy-label")}{" "}
//                     <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
//                         https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
//                     </a>
//                 </p>
//             );
//             break;
//         default:
//             return (
//                 <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
//                     {t("myrepresentations:publish-policy-label")}{" "}
//                     <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
//                         https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
//                     </a>
//                 </p>
//             );
//             break;
//     }

//     return guidanceString;
// };