import { useEffect } from "preact/hooks";

export default function LandlordMessageSelection() {
  useEffect(() => {
    const container = document.querySelector<HTMLElement>(
      "[data-message-form]",
    );
    if (!container) return;

    const selectAll = container.querySelector<HTMLInputElement>(
      "[data-select-all]",
    );
    const deleteButton = container.querySelector<HTMLButtonElement>(
      "[data-delete-button]",
    );
    const checkboxes = Array.from(
      container.querySelectorAll<HTMLInputElement>("[data-message-checkbox]"),
    );
    const labelBase = "Delete selected";

    const updateState = () => {
      const checkedCount = checkboxes.filter((box) => box.checked).length;
      const totalCount = checkboxes.length;

      if (selectAll) {
        selectAll.indeterminate = checkedCount > 0 &&
          checkedCount < totalCount;
        selectAll.checked = totalCount > 0 && checkedCount === totalCount;
      }

      if (deleteButton) {
        deleteButton.disabled = checkedCount === 0;
        deleteButton.textContent = checkedCount > 0
          ? `${labelBase} (${checkedCount})`
          : labelBase;
      }
    };

    const handleSelectAllChange = (event: Event) => {
      const target = event.target as HTMLInputElement | null;
      const nextChecked = Boolean(target?.checked);
      checkboxes.forEach((box) => {
        box.checked = nextChecked;
      });
      updateState();
    };

    const handleCheckboxChange = () => updateState();

    selectAll?.addEventListener("change", handleSelectAllChange);
    checkboxes.forEach((box) =>
      box.addEventListener("change", handleCheckboxChange)
    );

    updateState();

    return () => {
      selectAll?.removeEventListener("change", handleSelectAllChange);
      checkboxes.forEach((box) =>
        box.removeEventListener("change", handleCheckboxChange)
      );
    };
  }, []);

  return <span class="hidden" data-message-selection aria-hidden="true" />;
}