import ErrorMessage from "../ErrorMessage/ErrorMessage";
import Category from "./Category";
import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
import React, { useEffect } from "react";
const CategoryCheckbox = (props) => {
    const sanitizeInitialValues = (value) => {
        if (!value) {
            return [];
        }
        return value.map((value) => {
            if (value instanceof BaseModel) {
                return value._id;
            }
            return value;
        });
    };
    const [currentValues, setCurrentValues] = React.useState(sanitizeInitialValues(props.initialValue));
    const [categories] = React.useState([
        ...props.categories,
    ]);
    const [options] = React.useState([
        ...props.options,
    ]);
    useEffect(() => {
        // whenevent currentValue changes, make sure all the values are unique.
        const doesHaveDuplicates = currentValues.some((value, index) => {
            return currentValues.indexOf(value) !== index;
        });
        if (!doesHaveDuplicates) {
            return;
        }
        const tempCurrentValues = [];
        currentValues.forEach((value) => {
            if (!tempCurrentValues.includes(value)) {
                tempCurrentValues.push(value);
            }
        });
        setCurrentValues(tempCurrentValues);
    }, [currentValues]);
    if (options.length === 0) {
        return (React.createElement("div", null,
            React.createElement(ErrorMessage, { message: "No options found." })));
    }
    const getCategory = (category, isLastCategory = false) => {
        return (React.createElement(Category, { initialValue: currentValues.filter((value) => {
                // only return this option if it belongs to this category
                const option = options.find((option) => {
                    return (option.value === value &&
                        (option.categoryId || "") === ((category === null || category === void 0 ? void 0 : category.id) || ""));
                });
                return Boolean(option);
            }), dataTestId: props.dataTestId, category: category, options: options.filter((option) => {
                return (option.categoryId || "") === ((category === null || category === void 0 ? void 0 : category.id) || "");
            }), isLastCategory: isLastCategory, onChange: (value) => {
                // remove any value from currentValue that belongs to this category.
                const tempCurrentValues = [
                    ...currentValues,
                ];
                options.forEach((option) => {
                    const index = tempCurrentValues.findIndex((value) => {
                        return (value === option.value &&
                            (option.categoryId || "") === ((category === null || category === void 0 ? void 0 : category.id) || ""));
                    });
                    if (index > -1) {
                        tempCurrentValues.splice(index, 1);
                    }
                });
                // add the new values to currentValue
                value.forEach((value) => {
                    tempCurrentValues.push(value);
                });
                setCurrentValues(tempCurrentValues);
                props.onChange(tempCurrentValues);
            } }));
    };
    return (React.createElement("div", null,
        getCategory(undefined, categories.length === 0),
        categories.map((category, i) => {
            return (React.createElement("div", { key: i }, getCategory(category, i === categories.length - 1)));
        }),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default CategoryCheckbox;
//# sourceMappingURL=Index.js.map