/* eslint-disable @typescript-eslint/no-explicit-any */
import { useMemo, useRef, useState } from "react";
import SettingView from "./SettingView";
import ColumnChooser from "./ColumnChooser/ColumnChooser";

import SettingPopup from "./SettingPopup";
import { ChooserColumn } from "../../data/setting";
import useClickOutside from "../../../../utils/useClickOutside";
import _ from "lodash";

export enum DataWidgetType {
  CARD = "CARD",
  GRID = "GRID",
}

export type SettingProps = {
  visible: boolean;
  disabled: boolean;
  disableColumnChooser: boolean;
  disabledDisplayWidgetType: boolean;
  enableCustomView?: boolean;
  defaultActiveDataWidgetType?: DataWidgetType;
  columns: ChooserColumn[];
  uiElementGroupData: Record<string, any>;
  config: { uiElementGroupId: string };
  onModelUpdate: (
    callBack: ((args: any) => void) | null,
    fieldName: string,
    value: any,
  ) => void;
};

/**
 * Order-sorted copy, preserving a missing list as-is so callers can still test
 * the source for presence. Never mutates: `appliedColumns` comes straight off
 * the model, so an in-place `sort` would reorder shared state.
 */
const sortByOrder = (
  columns: ChooserColumn[] | undefined,
): ChooserColumn[] | undefined =>
  columns
    ? [...columns].sort(
        (a: ChooserColumn, b: ChooserColumn) => (a.order ?? 0) - (b.order ?? 0),
      )
    : columns;

const Setting = (props: SettingProps) => {
  const [togglePopup, setTogglePopup] = useState(false);
  const [toggleColumnChooser, setToggleColumnChooser] = useState(false);

  const popupRef = useRef<HTMLDivElement>(null);

  useClickOutside(popupRef, togglePopup, () => setTogglePopup(false));

  const onSettingClick = () => {
    setTogglePopup((prevToggle) => !prevToggle);
  };

  const onChooserClick = () => {
    setToggleColumnChooser(
      (prevToggleColumnChooser) => !prevToggleColumnChooser,
    );
    setTogglePopup(false);
  };

  const hasSettingChanged = useMemo(() => {
    if (!props.enableCustomView) return false;
    const currentSetting = props.uiElementGroupData?.setting;
    if (!currentSetting) return false;

    // Both sides must be ordered by the same key before `isEqual`. The baseline
    // was sorted by `order` but `appliedColumns` was not — and it is seeded
    // unsorted (UserView.tsx seeds it from `columns.filter(selected)` while
    // `selectedColumns` gets the `order` sort), so a pristine toolbar whose
    // columns are not already declared in `order` sequence compared unequal and
    // lit the "filter applied" badge.
    const appliedColumns = sortByOrder(
      currentSetting?.columnChooser?.appliedColumns,
    );
    const defaultSelectedColumns = sortByOrder(
      props.columns?.filter((c: ChooserColumn) => c.selected),
    );
    const columnsChanged =
      appliedColumns &&
      defaultSelectedColumns?.length &&
      !_.isEqual(appliedColumns, defaultSelectedColumns);

    const widgetTypeChanged =
      currentSetting?.activeDataWidgetType &&
      props.defaultActiveDataWidgetType &&
      currentSetting.activeDataWidgetType !== props.defaultActiveDataWidgetType;

    return !!(columnsChanged || widgetTypeChanged);
  }, [
    props.enableCustomView,
    props.defaultActiveDataWidgetType,
    props.columns,
    props.uiElementGroupData?.setting,
  ]);

  const onWidgetTypeClick = () => {
    setTogglePopup(false);
    const updatedSetting = {
      ...props.uiElementGroupData?.setting,
      activeDataWidgetType:
        props.uiElementGroupData?.setting?.activeDataWidgetType ===
        DataWidgetType.GRID
          ? DataWidgetType.CARD
          : DataWidgetType.GRID,
    };

    const updatedUiElementGroupData = {
      ...props.uiElementGroupData,
      setting: updatedSetting,
    };

    props.onModelUpdate(
      null,
      props.config.uiElementGroupId,
      updatedUiElementGroupData,
    );
    setTogglePopup(false);
  };

  return props.visible ? (
    <div className="tmpl-setting-container" ref={popupRef}>
      <SettingView
        disabled={props.disabled}
        onSettingClick={onSettingClick}
        hasAppliedFilter={hasSettingChanged}
      />
      {togglePopup && !props.disabled && (
        <SettingPopup
          activeDataWidgetType={
            props.uiElementGroupData?.setting?.activeDataWidgetType
          }
          onSettingClick={onSettingClick}
          onChooserClick={onChooserClick}
          onWidgetTypeClick={onWidgetTypeClick}
        />
      )}
      {toggleColumnChooser && !props.disabled && (
        <ColumnChooser
          uiElementGroupData={props.uiElementGroupData}
          toggleColumnChooser={toggleColumnChooser}
          columns={props.columns}
          config={props.config}
          onChooserClick={onChooserClick}
          onModelUpdate={props.onModelUpdate}
          setToggleColumnChooser={setToggleColumnChooser}
          setTogglePopup={setTogglePopup}
        />
      )}
    </div>
  ) : (
    <></>
  );
};
export default Setting;