import React from "react";
import { AllTreeRenderProps } from "../types";

const cx = (...classNames: Array<string | undefined | false>) => classNames.filter((cn) => !!cn).join(" ");

export const createDefaultRenderers = (renderDepthOffset: number): AllTreeRenderProps => ({
  renderItemTitle: ({ title, context, info }) => {
    if (!info.isSearching || !context.isSearchMatching) {
      return title;
    }
    const startIndex = title.toLowerCase().indexOf(info.search!.toLowerCase());
    return (
      <>
        {startIndex > 0 && <span>{title.slice(0, startIndex)}</span>}
        <span className="rct-tree-item-search-highlight">
          {title.slice(startIndex, startIndex + info.search!.length)}
        </span>
        {startIndex + info.search!.length < title.length && (
          <span>{title.slice(startIndex + info.search!.length, title.length)}</span>
        )}
      </>
    );
  },
  renderItem: ({ item, depth, children, title, context }) => {
    const InteractiveComponent = context.isRenaming ? "div" : "button";
    const type = context.isRenaming ? undefined : "button";
    // TODO have only root li component create all the classes
    return (
      <li
        {...(context.itemContainerWithChildrenProps as any)}
        className={cx(
          "rct-tree-item-li",
          item.isFolder && "rct-tree-item-li-isFolder",
          context.isSelected && "rct-tree-item-li-selected",
          context.isExpanded && "rct-tree-item-li-expanded",
          context.isFocused && "rct-tree-item-li-focused",
          // context.isDraggingOver && 'rct-tree-item-li-dragging-over',
          context.isSearchMatching && "rct-tree-item-li-search-match"
        )}>
        <div
          {...(context.itemContainerWithoutChildrenProps as any)}
          style={{ paddingLeft: `${(depth + 1) * renderDepthOffset}px` }}
          className={cx(
            "rct-tree-item-title-container",
            item.isFolder && "rct-tree-item-title-container-isFolder",
            context.isSelected && "rct-tree-item-title-container-selected",
            context.isExpanded && "rct-tree-item-title-container-expanded",
            context.isFocused && "rct-tree-item-title-container-focused",
            // context.isDraggingOver &&
            //   'rct-tree-item-title-container-dragging-over',
            context.isSearchMatching && "rct-tree-item-title-container-search-match"
          )}>
          <InteractiveComponent
            type={type}
            {...(context.interactiveElementProps as any)}
            className={cx(
              "rct-tree-item-button",
              item.isFolder && "rct-tree-item-button-isFolder",
              context.isSelected && "rct-tree-item-button-selected",
              context.isExpanded && "rct-tree-item-button-expanded",
              context.isFocused && "rct-tree-item-button-focused",
              // context.isDraggingOver && 'rct-tree-item-button-dragging-over',
              context.isSearchMatching && "rct-tree-item-button-search-match"
            )}>
            {title}
          </InteractiveComponent>
        </div>
        {children}
      </li>
    );
  },
  renderRenameInput: ({ inputProps, inputRef, submitButtonProps, submitButtonRef, formProps }) => (
    <form {...formProps} className="rct-tree-item-renaming-form">
      <input {...inputProps} ref={inputRef} className="rct-tree-item-renaming-input" />
      <input
        {...submitButtonProps}
        ref={submitButtonRef}
        type="submit"
        className="rct-tree-item-renaming-submit-button"
        value="🗸"
      />
    </form>
  ),
  renderDraggingItem: () => <div />,
  renderDraggingItemTitle: () => <div />,
  renderTreeContainer: ({ children, containerProps, info }) => (
    <div
      className={cx(
        "rct-tree-root",
        info.isFocused && "rct-tree-root-focus",
        info.isRenaming && "rct-tree-root-renaming",
        info.areItemsSelected && "rct-tree-root-itemsselected"
      )}>
      <div {...containerProps} style={{ minHeight: "30px", ...containerProps.style }}>
        {children}
      </div>
    </div>
  ),
  renderItemsContainer: ({ children, containerProps }) => (
    <ul {...containerProps} className="rct-tree-items-container">
      {children}
    </ul>
  ),
  renderSearchInput: ({ inputProps }) => (
    <div className={cx("rct-tree-search-input-container")}>
      <input {...inputProps} className={cx("rct-tree-search-input")} />
    </div>
  ),
  renderLiveDescriptorContainer: ({ tree, children }) => (
    <div
      id={`rct-livedescription-${tree.treeId}`}
      style={{
        clip: "rect(0 0 0 0)",
        clipPath: "inset(50%)",
        height: "1px",
        overflow: "hidden",
        position: "absolute",
        whiteSpace: "nowrap",
        width: "1px",
      }}>
      {children}
    </div>
  ),
  renderDepthOffset,
});