import React from 'react';
import type { TreeItemContentRenderProps } from 'react-aria-components';
import type { Collection as CollectionInterface, Node } from 'react-stately';
import classNames from 'classnames';

import { Text as CoreText } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import { type ScreenSize } from '../../../hooks/useScreenSize';
import { getTypographyProps } from '../../Typography/getTypographyProps';
import type { TreeItemKey } from '../useTreeState';

import { TreeItemCheckbox } from './TreeItemCheckbox';
import { TreeItemChevron } from './TreeItemChevron';
import { TreeItemHandle } from './TreeItemHandle';

export interface TreeItemState extends TreeItemContentRenderProps {}

export interface TreeItemRenderProps<T extends object, V extends TreeItemKey = string> {
  /** The state of the tree item. */
  state: TreeItemState;
  /** The unique key/value for the tree item. */
  value: V;
  /** The original item data object. */
  item: T;
  /** The text label to display for the item. */
  label: string;
  /** Optional text description to display for the item. */
  description?: string;
  /** Whether the item is currently loading its children. */
  loading?: boolean;
  /** The current screen size. */
  screenSize?: ScreenSize;
  /** Display checkbox error state. */
  error?: boolean;
  /** Display checkbox warning state. */
  warning?: boolean;
}

export interface TreeItemProps<T extends object, V extends TreeItemKey = string> extends SafeOmit<
  TreeItemRenderProps<T, V>,
  'item'
> {
  /** Optional action buttons or elements to display for the item. */
  actions?: React.ReactNode;
}

export function TreeItem<T extends object, V extends TreeItemKey = string>({
  state: { selectionMode, level, isExpanded, hasChildItems, allowsDragging, isSelected, state },
  label,
  description,
  loading,
  actions,
  value,
  screenSize,
  error,
  warning,
  ..._rest
}: TreeItemProps<T, V>) {
  const isSelectable = selectionMode !== 'none';

  const isIndeterminate =
    isSelectable &&
    !isSelected &&
    hasChildItems &&
    collectNestedValues(value, state.collection).some(key => state.selectionManager.isSelected(key));

  return (
    <>
      {allowsDragging && <TreeItemHandle />}

      <div className='v2Tree__listItemIndent' />

      {hasChildItems ? (
        <TreeItemChevron isExpanded={isExpanded} isLoading={loading} />
      ) : (
        <div className='v2Tree__listItemSpacer' />
      )}

      {isSelectable && (
        <TreeItemCheckbox label={label} indeterminate={isIndeterminate} error={error} warning={warning} />
      )}

      <CoreText
        {...getTypographyProps({ className: 'v2Tree__listItemLabel', appearance: level === 1 ? 'strong-md' : 'md' })}
      >
        {label}
      </CoreText>

      {description ? (
        <CoreText
          {...getTypographyProps({ className: 'v2Tree__listItemDescription', variant: 'secondary', appearance: 'md' })}
        >
          ({description})
        </CoreText>
      ) : null}

      {actions && (
        <div
          className={classNames('v2Tree__listItemActions', {
            'v2Tree__listItemActions--alwaysVisible': screenSize === 'small',
          })}
          onClick={event => event.stopPropagation()}
          onPointerDown={event => event.stopPropagation()}
          onKeyDown={event => event.stopPropagation()}
        >
          {actions}
        </div>
      )}
    </>
  );
}

function collectNestedValues<V extends TreeItemKey>(value: V, collection: CollectionInterface<Node<any>>): V[] {
  const values: V[] = [];
  const children = [...(collection.getChildren?.(value) ?? [])].filter(c => c.type === 'item');

  for (const child of children) {
    const childValue = child.key as V;
    const nestedValues = collectNestedValues(childValue, collection);
    values.push(childValue, ...nestedValues);
  }

  return values;
}