/* eslint-disable @typescript-eslint/no-explicit-any */
import { useRef, useState } from "react";
import GroupByView from "./GroupByView";
import GroupByPopUp from "./GroupByPopUp";
import _ from "lodash";
import useClickOutside from "../../../../utils/useClickOutside";

export type GroupByProps = {
  visible: boolean;
  disabled: boolean;
  enableCustomView?: boolean;
  groupableFields: { label: string; value: string }[];
  uiElementGroupData: Record<string, any>;
  config: { uiElementGroupId: string };
  onModelUpdate: (
    callBack: ((args: any) => void) | null,
    fieldName: string,
    value: any
  ) => void;
};

const GroupBy = (props: GroupByProps) => {
  const [togglePopup, setTogglePopup] = useState(false);
  const popupRef = useRef<HTMLDivElement>(null);

  useClickOutside(
    popupRef,
    togglePopup,
    () => setTogglePopup(false),
    // Clicks landing in the multiselect's detached list popup are not "outside".
    (target) => (target as any)?.offsetParent?.className === "k-list-content",
  );

  const onGroupApply = (groupFields: { label: string; value: string }[]) => {
    const updatedGroupedBy = {
      ...props.uiElementGroupData.groupedBy,
      appliedGroups: _.cloneDeep(groupFields),
    };

    const updatedUiElementGroupData = {
      ...props.uiElementGroupData,
      groupedBy: updatedGroupedBy,
      // Back to the first page, the same way advanced search, global search
      // and quick filter do. Changing the grouping changes the result set, so
      // a `skip` left over from paging points into the old one: after a CARD
      // view had scrolled to the end (skip 100 of 121) adding or removing a
      // group refetched page 3 and replaced the list with its 21-record tail.
      pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
    };
    setTogglePopup(false);
    props.onModelUpdate(
      null,
      props.config.uiElementGroupId,
      updatedUiElementGroupData
    );
  };

  const onPopupToggle = () => {
    setTogglePopup((prevToggle) => !prevToggle);
  };
  return props.visible ? (
    <div className="tmpl-group-filter-container" ref={popupRef}>
      <GroupByView
        disabled={props.disabled}
        onPopupToggle={onPopupToggle}
        hasAppliedFilter={
          props.enableCustomView &&
          (props.uiElementGroupData?.groupedBy?.appliedGroups?.length > 0)
        }
      />
      {togglePopup && !props.disabled && (
        <GroupByPopUp
          selectedGroups={
            props.uiElementGroupData?.groupedBy?.appliedGroups ?? []
          }
          groupableFields={props.groupableFields}
          onPopupToggle={onPopupToggle}
          onGroupApply={onGroupApply}
        />
      )}
    </div>
  ) : (
    <></>
  );
};
export default GroupBy;