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

export type UserViewViewProps = {
  selectedView?: View;
  allViews: View[];
  disabled: boolean;
  onViewToggle: () => void;
  setDefault: (id: string) => void;
  onDelete: (id: string) => void;
  onSave: (id: string) => void;
  markAsSelected: (view: View) => void;
  hasUnsavedChanges?: boolean;
};

const UserViewView = ({
  selectedView,
  allViews,
  disabled,
  onViewToggle,
  setDefault,
  onDelete,
  onSave,
  markAsSelected,
  hasUnsavedChanges,
}: UserViewViewProps) => {
  const [viewToDelete, setViewToDelete] = useState<View | null>(null);

  return (
    <div className="tmpl-screen-view-wrapper">
      {hasUnsavedChanges &&
        selectedView?.id &&
        selectedView?.id !== SYSTEM_DEFAULT && (
          <span className="tmpl-unsaved-indicator" title="Unsaved changes" />
        )}
      <FactoryRenderer
        uiElementType="WIDGET"
        widgetType="DROPDOWN"
        disabled={disabled}
        listData={allViews}
        textField="name"
        dataItemKey="id"
        value={selectedView}
        title={selectedView?.name ?? "Select View"}
        toolTip={{ isApply: true, dataTip: selectedView?.name ?? "Select View" }}
        rootStyle={{
          className: "qo-font-md tmpl-dropdown-root",
          effectiveStyles: [
            { selector: ".qo-font-md", target: ".tmpl-dropdown-root .tmpl-screen-view", important: true },
            { selector: ".qo-border-none", target: ".tmpl-dropdown-root .k-picker-flat", important: true },
          ],
        }}
        widgetStyle={{
          className: "tmpl-screen-view",
        }}
        footer={
          <div className="tmpl-screen-view-footer" onClick={onViewToggle}>
            <FactoryRenderer
              uiElementType="WIDGET"
              widgetType="BUTTON"
              title="+ Create View"
              widgetStyle={{
                className:
                  "qo-btn qo-btn-primary qo-font-weight-medium qo-font-md",
              }}
              fillMode="solid"
              role="button"
              type="button"
            />
          </div>
        }
        itemRender={(li: any, itemProp: any) => {
          const isSelected = itemProp.dataItem?.id === selectedView?.id;
          return cloneElement(
            li,
            {
              ...li.props,
              className: `qo-font-md ${
                li.props.className || ""
              } prc-dropdown-list-item${
                isSelected ? " prc-dropdown-list-item--selected" : ""
              }`,
            },
            <ViewItem
              view={itemProp.dataItem as View}
              selectedView={selectedView}
              markAsSelected={markAsSelected}
              onDelete={onDelete}
              setDefault={setDefault}
              onSave={onSave}
              onDeleteRequest={(view) => setViewToDelete(view)}
            />,
          );
        }}
        fillMode={"flat"}
        popupSettings={{
          popupClass: "tmpl-button-popup",
        }}
      />
      {viewToDelete && (
        <FactoryRenderer
          uiElementType="WIDGET"
          widgetType="CONFOMATIONALERTBOX"
          value={null}
          title="Delete View"
          messageHeader={`Are you sure you want to delete "${viewToDelete.name}"?`}
          messageBody="This action cannot be undone."
          onConfirm={() => {
            onDelete(viewToDelete.id);
            setViewToDelete(null);
          }}
          onCancel={() => setViewToDelete(null)}
        />
      )}
    </div>
  );
};

export default UserViewView;