/* eslint-disable @typescript-eslint/no-explicit-any */
import { SYSTEM_DEFAULT } from "../../../../constant";
import { View } from "../../data/userView";
import FactoryRenderer from "../../../../Renderer";

type ViewItem = {
  view: View;
  selectedView?: View;
  onDelete: (id: string) => void;
  onSave: (id: string) => void;
  markAsSelected: (view: View) => void;
  setDefault: (id: string) => void;
  onDeleteRequest?: (view: View) => void;
  /**
   * Raises the rename to the container, which opens the view dialog in edit
   * mode. The row does not own the editor — same shape as `onDeleteRequest`,
   * which raises to the confirmation alert.
   */
  onRenameRequest?: (view: View) => void;
};

const ViewItem = ({
  view,
  selectedView,
  onSave,
  markAsSelected,
  setDefault,
  onDeleteRequest,
  onRenameRequest,
}: ViewItem) => {
  const isSelected = view.id === selectedView?.id;
  const isDefault = view.id === SYSTEM_DEFAULT;

  // Every action in this row stops propagation: the row's own click selects the
  // view, and Kendo's <li> around it closes the popup.
  const handleDelete = (
    callBack: any,
    fieldName: string,
    e: React.MouseEvent,
  ) => {
    e.stopPropagation();
    if (onDeleteRequest) {
      onDeleteRequest(view);
    }
  };

  const handleRename = (
    callBack: any,
    fieldName: string,
    e: React.MouseEvent,
  ) => {
    e.stopPropagation();
    onRenameRequest?.(view);
  };

  const handleSave = (
    callBack: any,
    fieldName: string,
    e: React.MouseEvent,
  ) => {
    e.stopPropagation();
    onSave(view.id);
  };

  const handleSetDefault = (
    callBack: any,
    fieldName: string,
    e: React.MouseEvent,
  ) => {
    e.stopPropagation();
    setDefault(view.id);
  };

  return (
    <div
      className={`tmpl-screen-view-item ${
        isSelected ? "tmpl-view-item-heighlight" : ""
      }`}
      onClick={() => markAsSelected(view)}
    >
      <p className="tmpl-screen-view-name" title={view.name}>
        {view.name}
      </p>
      {/*
        The actions are one group, so the space BETWEEN them and the space
        between them and the name are two different measures rather than one
        shared gap — see `.tmpl-screen-view-actions`.
      */}
      <div className="tmpl-screen-view-actions">
      {/*
        System Default is derived rather than stored, so there is no record to
        rename or delete. Same guard both actions use.
      */}
      {!isDefault && (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-default tmpl-button-icon tmpl-rename-icon",
          }}
          name="pencil"
          aria-label="Rename view"
          fillMode="clear"
          onClick={handleRename}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Edit"
        />
      )}
      {!isDefault && (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-danger tmpl-button-icon tmpl-delete-icon",
          }}
          name="delete"
          aria-label="Delete view"
          fillMode="clear"
          onClick={handleDelete}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Delete"
        />
      )}
      {!isDefault && isSelected && (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-primary tmpl-button-icon tmpl-delete-icon",
          }}
          name="save"
          aria-label="Save view"
          fillMode="clear"
          onClick={handleSave}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Save"
        />
      )}
      {view.isDefault ? (
        <label>Default</label>
      ) : (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-default tmpl-button-icon tmpl-set-default",
          }}
          name="star"
          aria-label="Set as default view"
          fillMode="clear"
          onClick={handleSetDefault}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Set Default"
        />
      )}
      </div>
    </div>
  );
};

export default ViewItem;