/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  TextBox,
  InputClearValue,
  InputSeparator,
} from "@progress/kendo-react-inputs";
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">
        <h2>Column Chooser</h2>
        <div>
          <FactoryRenderer
            widgetStyle={{
              className: "qo-btn qo-btn-outline-danger qo-btn-md",
            }}
            onClick={props.onChooserRestore}
            title="Restore"
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
          <FactoryRenderer
            widgetStyle={{ className: "qo-btn qo-btn-primary qo-btn-md" }}
            onClick={props.onChooserApply}
            title="Apply"
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            widgetStyle={{ className: "qo-btn qo-text-default" }}
            onClick={props.onChooserClose}
          />
        </div>
      </div>
      <div className="tmpl-chooser-body">
        <div>
          <div className="tmpl-search-container">
            <TextBox
              className="tmpl-search tmpl-input"
              value={props.searchInput}
              placeholder="Type here to search . . ."
              onChange={(e) => props.setSearchInput(e.target.value as string)}
              suffix={() =>
                props.searchInput ? (
                  <>
                    <InputSeparator />
                    <InputClearValue onClick={() => props.setSearchInput("")}>
                      <FactoryRenderer
                        name="close"
                        uiElementType="WIDGET"
                        widgetType="ICON"
                        fillMode="clear"
                        title=""
                      />
                    </InputClearValue>
                  </>
                ) : (
                  <></>
                )
              }
            />
          </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: {
                  className:
                    "qo-font-family-primary qo-font-md 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}>
                  {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;