/* 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;
};

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

  const handleDelete = (
    callBack: any,
    fieldName: string,
    e: React.MouseEvent,
  ) => {
    e.stopPropagation();
    if (onDeleteRequest) {
      onDeleteRequest(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>
      {!isDefault && (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-danger tmpl-button-sm tmpl-delete-icon",
          }}
          name="delete"
          fillMode="clear"
          onClick={handleDelete}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Delete"
        />
      )}
      {!isDefault && isSelected && (
        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-primary tmpl-button-sm tmpl-delete-icon",
          }}
          name="save"
          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-sm tmpl-set-default",
          }}
          name="star"
          fillMode="clear"
          onClick={handleSetDefault}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Set Default"
        />
      )}
    </div>
  );
};

export default ViewItem;