import * as React from 'react';
import useSize from '@react-hook/size';
import { FixedSizeList as List } from 'react-window';
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { ContainerProperties } from '../ContainerProperties/ContainerProperties';
import { type IContainerModel } from '../../Interfaces/IContainerModel';
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { type PropertyType } from '../../Enums/PropertyType';
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
import { Text } from '../Text/Text';
import { ExtendedSidebar } from '../UI/UI';

interface IElementsSidebarProps {
  containers: Map<string, IContainerModel>
  mainContainer: IContainerModel
  symbols: Map<string, ISymbolModel>
  selectedContainer: IContainerModel | undefined
  selectedExtendedSidebar: ExtendedSidebar
  onPropertyChange: (
    key: string,
    value: string | number | boolean | number[],
    type?: PropertyType
  ) => void
  selectContainer: (containerId: string) => void
  addContainer: (index: number, type: string, parent: string) => void
  onExpandChange: (value: ExtendedSidebar) => void
}

function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): void {
  const bordersClasses = ['border-t-8', 'border-8', 'border-b-8'].filter(className => className !== exception);
  target.classList.remove(...bordersClasses);
}

function HandleDragLeave(event: React.DragEvent): void {
  const target: HTMLButtonElement = event.target as HTMLButtonElement;

  RemoveBorderClasses(target);
}

function HandleDragOver(
  event: React.DragEvent,
  mainContainer: IContainerModel
): void {
  event.preventDefault();
  const target: HTMLButtonElement = event.target as HTMLButtonElement;

  const rect = target.getBoundingClientRect();
  const y = event.clientY - rect.top; // y position within the element.

  if (target.id === mainContainer.properties.id) {
    target.classList.add('border-8');
    return;
  }

  if (y < 12) {
    RemoveBorderClasses(target, 'border-t-8');
    target.classList.add('border-t-8');
  } else if (y < 24) {
    RemoveBorderClasses(target, 'border-8');
    target.classList.add('border-8');
  } else {
    RemoveBorderClasses(target, 'border-b-8');
    target.classList.add('border-b-8');
  }
}

function HandleOnDrop(
  event: React.DragEvent,
  containers: Map<string, IContainerModel>,
  mainContainer: IContainerModel,
  addContainer: (index: number, type: string, parent: string) => void
): void {
  event.preventDefault();
  const type = event.dataTransfer.getData('type');
  const target: HTMLButtonElement = event.target as HTMLButtonElement;
  RemoveBorderClasses(target);

  const targetContainer: IContainerModel | undefined = FindContainerById(
    containers,
    target.id
  );

  if (targetContainer === undefined) {
    throw new Error('[handleOnDrop] Tried to drop onto a unknown container!');
  }

  if (targetContainer === mainContainer) {
    // if the container is the root, only add type as child
    addContainer(
      targetContainer.children.length,
      type,
      targetContainer.properties.id
    );
    return;
  }

  const parent = FindContainerById(containers, targetContainer.properties.parentId);
  if (parent === null ||
      parent === undefined) {
    throw new Error('[handleDrop] Tried to drop into a child container without a parent!');
  }

  const rect = target.getBoundingClientRect();
  const y = event.clientY - rect.top; // y position within the element.

  // locate the hitboxes
  if (y < 12) {
    const index = parent.children.indexOf(targetContainer.properties.id);
    addContainer(
      index,
      type,
      parent.properties.id
    );
  } else if (y < 24) {
    addContainer(
      targetContainer.children.length,
      type,
      targetContainer.properties.id
    );
  } else {
    const index = parent.children.indexOf(targetContainer.properties.id);
    addContainer(
      index + 1,
      type,
      parent.properties.id
    );
  }
}

export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
  // States
  const divRef = React.useRef<HTMLDivElement>(null);
  const [,height] = useSize(divRef);

  // Render
  const it = MakeRecursionDFSIterator(props.mainContainer, props.containers, 0, [0, 0], true);
  const containers = [...it];
  function Row({
    index, style
  }: {
    index: number
    style: React.CSSProperties
  }): JSX.Element {
    const { container, depth } = containers[index];
    const key = container.properties.id.toString();
    const text = container.properties.displayedText === key
      ? `${key}`
      : `${container.properties.displayedText}`;

    const isSelected = props.selectedContainer !== undefined &&
      props.selectedContainer !== null &&
      props.selectedContainer.properties.id === container.properties.id;

    return (
      ElementsListRow(
        key,
        container,
        depth,
        isSelected,
        style,
        text,
        props.containers,
        props.mainContainer,
        props.addContainer,
        props.selectContainer
      )
    );
  }

  return (
    <div className='flex flex-row h-full w-full' >
      {props.selectedExtendedSidebar === ExtendedSidebar.Property &&
        <div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
          <ContainerProperties
            containers ={props.containers}
            properties={props.selectedContainer?.properties}
            symbols={props.symbols}
            onChange={props.onPropertyChange}
          />
        </div>
      }
      <div className='flex w-64' ref={divRef}>
        <div className='w-6'>
          <ToggleSideBar
            title={Text({ textId: '@Properties' })}
            checked={props.selectedExtendedSidebar === ExtendedSidebar.Property}
            onClick={() => {
              const newValue = props.selectedExtendedSidebar !== ExtendedSidebar.Property
                ? ExtendedSidebar.Property
                : ExtendedSidebar.None;
              props.onExpandChange(newValue);
            }}
          />
        </div>
        <List
          itemCount={containers.length}
          itemSize={40}
          height={height}
          width={'100%'}
        >
          {Row}
        </List>
      </div>
    </div>
  );
}

function ElementsListRow(
  key: string,
  container: IContainerModel,
  depth: number,
  isSelected: boolean,
  style: React.CSSProperties,
  text: string,
  containers: Map<string, IContainerModel>,
  mainContainer: IContainerModel,
  addContainer: (index: number, type: string, parent: string) => void,
  selectContainer: (containerId: string) => void
): JSX.Element {
  const verticalBars: JSX.Element[] = [];
  const verticalBarSelectedClass = isSelected
    ? 'border-l-blue-400 group-hover:border-l-blue-300'
    : 'border-l-slate-400 group-hover:border-l-slate-300';
  for (let i = 0; i < depth; i++) {
    verticalBars.push(<span
      key={`${key}-${i}`}
      className={`h-full border-l-2 pr-2 ${verticalBarSelectedClass}`}
    ></span>);
  }

  const buttonSelectedClass: string = isSelected
    ? 'bg-blue-500  shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50'
    : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';

  return <button type="button"
    className={`transition-all border-blue-500 
      hover:shadow-lg elements-sidebar-row whitespace-pre 
      text-left text-sm font-medium flex items-center align-middle group 
      ${container.properties.type} ${buttonSelectedClass}`}
    id={key}
    key={key}
    style={style}
    title={container.properties.warning}
    onClick={() => { selectContainer(container.properties.id); }}
    onDrop={(event) => {
      HandleOnDrop(event, containers, mainContainer, addContainer);
    }}
    onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
    onDragLeave={(event) => { HandleDragLeave(event); }}
  >
    {verticalBars}
    {text}
    {container.properties.warning.length > 0 &&
      <ExclamationTriangleIcon className='pl-2 w-7' />}
  </button>;
}