import CheckboxElement from "../Checkbox/Checkbox";
import CheckBoxList from "./CheckboxList";
import React, { useEffect } from "react";
var CategoryCheckboxValueState;
(function (CategoryCheckboxValueState) {
    CategoryCheckboxValueState[CategoryCheckboxValueState["Checked"] = 0] = "Checked";
    CategoryCheckboxValueState[CategoryCheckboxValueState["Unchecked"] = 1] = "Unchecked";
    CategoryCheckboxValueState[CategoryCheckboxValueState["Indeterminate"] = 2] = "Indeterminate";
})(CategoryCheckboxValueState || (CategoryCheckboxValueState = {}));
const Category = (props) => {
    const [currentValues, setCurrentValues] = React.useState(props.initialValue || []);
    const [categoryCheckboxState, setCategoryCheckboxState] = React.useState(CategoryCheckboxValueState.Unchecked);
    useEffect(() => {
        // check if all of the options are checked. and if so, check the category
        const noOptionsChecked = currentValues.length === 0;
        if (noOptionsChecked) {
            setCategoryCheckboxState(CategoryCheckboxValueState.Unchecked);
            return;
        }
        const allOptionsChecked = props.options.every((option) => {
            return currentValues.includes(option.value);
        });
        if (allOptionsChecked) {
            setCategoryCheckboxState(CategoryCheckboxValueState.Checked);
        }
        else {
            setCategoryCheckboxState(CategoryCheckboxValueState.Indeterminate);
        }
    }, [currentValues]);
    useEffect(() => {
        setCurrentValues(props.initialValue || []);
    }, [props.initialValue]);
    return (React.createElement("div", null,
        props.category && (React.createElement("div", null,
            React.createElement(CheckboxElement, { title: props.category.title, dataTestId: props.dataTestId, value: categoryCheckboxState === CategoryCheckboxValueState.Checked, isIndeterminate: categoryCheckboxState === CategoryCheckboxValueState.Indeterminate, onChange: (isChecked, isIndeterminate) => {
                    if (isIndeterminate && !isChecked) {
                        return;
                    }
                    if (isChecked) {
                        // add all of the options to the currentValues array
                        const newValues = [
                            ...currentValues,
                        ];
                        props.options.forEach((option) => {
                            // please make sure that the option.value is not already in the array
                            if (newValues.includes(option.value)) {
                                return;
                            }
                            newValues.push(option.value);
                        });
                        setCurrentValues(newValues);
                        props.onChange(newValues);
                    }
                    else {
                        // remove all of the options from the currentValues array
                        const newValues = [
                            ...currentValues,
                        ];
                        props.options.forEach((option) => {
                            while (newValues.includes(option.value)) {
                                const index = newValues.findIndex((value) => {
                                    return value === option.value;
                                });
                                newValues.splice(index, 1);
                            }
                        });
                        setCurrentValues(newValues);
                        props.onChange(newValues);
                    }
                } }))),
        React.createElement("div", { className: `${props.category ? "ml-7" : ""}` },
            React.createElement(CheckBoxList, { options: props.options, initialValue: currentValues, onChange: (newValues) => {
                    setCurrentValues(newValues);
                    props.onChange(newValues);
                } })),
        !props.isLastCategory ? React.createElement("div", { className: "mt-3 mb-3" }) : React.createElement(React.Fragment, null)));
};
export default Category;
//# sourceMappingURL=Category.js.map