/* eslint-disable @typescript-eslint/no-explicit-any */
import DragDropContainer from "./DragDropContext";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

import React from "react";
import { ChooserColumn } from "../../../data/setting";
import FactoryRenderer from "../../../../../Renderer";

export type ColumnChooserViewProps = {
  popupChooserRef: any;
  allColumns: ChooserColumn[];
  selectedColumns: ChooserColumn[];
  searchInput: string;
  onFieldAddOrRemove: (id: number) => void;
  excludeIncludeToCard: (id: number) => void;
  toggleFreeze: (id: number) => void;
  onChooserApply: () => void;
  onChooserRestore: () => void;
  onChooserClose: () => void;
  onFieldDragEnd: (result: any) => void;
  setSearchInput: (searchKey: string) => void;
};

const ColumnChooserView: React.FC<ColumnChooserViewProps> = (props) => {
  return (
    <div className="tmpl-columnchooser-popup" ref={props.popupChooserRef}>
      <div className="tmpl-chooser-header">
        {/* The title is an <h3> carrying the theme's own `qo-h3` and no type of
            its own — see the heading note in scss/index.scss. The <div> beside
            it is the action group, and it stays. */}
        <h3 className="qo-h3">Column Chooser</h3>
        <div>
          <FactoryRenderer
            widgetStyle={{
              className: "qo-btn qo-btn-outline-danger tmpl-button",
            }}
            onClick={props.onChooserRestore}
            title="Restore"
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
          <FactoryRenderer
            widgetStyle={{ className: "qo-btn qo-btn-primary tmpl-button" }}
            onClick={props.onChooserApply}
            title="Apply"
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            aria-label="Close"
            widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-default" }}
            onClick={props.onChooserClose}
          />
        </div>
      </div>
      <div className="tmpl-chooser-body">
        <div>
          <div className="tmpl-search-container">
            <FactoryRenderer
              uiElementType="WIDGET"
              widgetType="TEXTBOX"
              name="columnChooserSearch"
              widgetStyle={{ className: "tmpl-search tmpl-input" }}
              value={props.searchInput}
              placeHolder="Type here to search . . ."
              onChange={(_callBack: any, _fieldName: any, value: any) =>
                props.setSearchInput((value ?? "") as string)
              }
              // Plain Kendo font-icon span, not the ICON widget: that widget
              // renders a Kendo <Button>, which inside `k-input` would be a
              // focusable control sitting in front of the text field. Same
              // reasoning as the drag handle in DragDropContext.tsx.
              prefix={() => (
                <span
                  className="k-icon k-font-icon k-i-search tmpl-search-icon"
                  role="presentation"
                />
              )}
              // Kept in the TEXTBOX widget's `suffix` slot so the adornment
              // still renders inside Kendo's `k-input` wrapper, exactly where
              // it sat before. Classes are the literal strings Kendo's
              // InputSeparator / InputClearValue produce.
              suffix={() =>
                props.searchInput ? (
                  <>
                    <span className="k-input-separator k-input-separator-vertical" />
                    <span
                      className="k-clear-value"
                      onClick={() => props.setSearchInput("")}
                    >
                      <FactoryRenderer
                        name="close"
                        uiElementType="WIDGET"
                        widgetType="ICON"
                        fillMode="clear"
                        title=""
                      />
                    </span>
                  </>
                ) : (
                  <></>
                )
              }
            />
          </div>
          {props.allColumns.length === 0 && (
            <div className="tmpl-no-result">
              <p>No fields found</p>
            </div>
          )}
          {props.allColumns.map((column) => (
            <FactoryRenderer
              key={column.id}
              uiElementType="WIDGET"
              widgetType="CHECKBOX"
              widgetStyle={{ className: "tmpl-column tmpl-checkbox" }}
              label={{
                position: "right",
                title: column.label,
                isApply: true,
                widgetStyle: {
                  // `qo-font-sm`: this is a scanning list of field names, so it
                  // sits a step below the selected-column labels on the right,
                  // which are the ones carrying the row controls.
                  className:
                    "qo-font-family-primary qo-font-sm qo-text-secondary prc-blc-inline-container",
                },
              }}
              disabled={column.primary}
              value={column.primary ? true : column.selected}
              onChange={() => {
                if (column.primary !== true) {
                  props.onFieldAddOrRemove(column.id);
                }
              }}
            />
          ))}
        </div>
        <div>
          <div className="tmpl-title">
            <p>
              {props.selectedColumns.length > 0
                ? `${props.selectedColumns.length} Column(s) Selected`
                : `No fields selected`}
            </p>
          </div>
          <DragDropContext onDragEnd={props.onFieldDragEnd}>
            <Droppable droppableId="droppable">
              {(provided: any) => (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  className="tmpl-chooser-droppable"
                >
                  {props.selectedColumns.map((column, index) =>
                    column.primary ? (
                      <DragDropContainer
                        key={column.id}
                        column={column}
                        excludeIncludeToCard={props.excludeIncludeToCard}
                        toggleFreeze={props.toggleFreeze}
                        onFieldAddOrRemove={props.onFieldAddOrRemove}
                      />
                    ) : (
                      <Draggable
                        key={column.id}
                        draggableId={column.id.toString()}
                        index={index}
                      >
                        {(provided: any) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={{
                              userSelect: "none",
                              ...provided.draggableProps.style,
                            }}
                          >
                            <DragDropContainer
                              column={column}
                              excludeIncludeToCard={props.excludeIncludeToCard}
                              toggleFreeze={props.toggleFreeze}
                              onFieldAddOrRemove={props.onFieldAddOrRemove}
                            />
                          </div>
                        )}
                      </Draggable>
                    ),
                  )}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </DragDropContext>
        </div>
      </div>
    </div>
  );
};

export default ColumnChooserView;