import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
import { PropsWithChildren, useContext, useState } from 'react';
import {
  Button as ButtonBase,
  Collection,
  Popover, SelectStateContext,
  TreeItemProps,
  UNSTABLE_Tree as Tree,
  UNSTABLE_TreeItem as TreeItem,
  UNSTABLE_TreeItemContent as TreeItemContent,
} from 'react-aria-components';
import { useAsyncList } from 'react-stately';
import { ChevronRightIcon } from '@heroicons/react/20/solid';
import clsx from 'clsx';
import { SelectedValueContext, TreeSelect, SelectValue } from '@/components/TreeSelect';
import { Button, Label } from '@/components/common';
import { loadItemChildren } from './documents';

function TreeNode({
  id, children, hasChildren, ...props
}: PropsWithChildren<TreeItemProps & {
  hasChildren: boolean
}>) {
  const selectState = useContext(SelectStateContext);
  const selectedValue = useContext(SelectedValueContext);
  const [isExpanded, setExpanded] = useState(false);

  const itemsList = useAsyncList({
    load: async () => {
      const items = await loadItemChildren(id as string);
      return { items };
    },
  });

  return (
    <TreeItem childItems={isExpanded ? itemsList.items : []} {...props}>
      <TreeItemContent>
        {({ level }) => (
          <ButtonBase
            className="text-sm w-full group flex items-center gap-2 cursor-default select-none py-2 px-1 outline-none text-gray-900 focus:bg-gray-100 hover:bg-gray-100 data-[hovered]:bg-gray-100"
            {...hasChildren ? {
              onPress: () => {
                setExpanded((s) => !s);
              },
              slot: 'chevron',
            } : {
              onPress: () => {
                selectedValue?.setValue(props.textValue);
                selectState.setSelectedKey(id as any);
                selectState.close();
              },
            }}
          >
            <div style={{ width: `${(level - 1) * 15}px` }} />
            <div className="pl-5 flex items-center relative">
              {hasChildren && (
                <ChevronRightIcon
                  className={clsx('h-4 w-4 absolute left-0 transition-transform duration-150', isExpanded && 'rotate-90')}
                />
              )}
              {children}
            </div>
          </ButtonBase>
        )}
      </TreeItemContent>
      <Collection items={itemsList.items}>
        {(item: any) => (
          <TreeNode
            id={item.id}
            textValue={item.name}
            hasChildren={item.hasChildren}
          >
            {item.name}
          </TreeNode>
        )}
      </Collection>
    </TreeItem>
  );
}

export default function FilePicker() {
  const rootList = useAsyncList({
    load: async () => {
      const items = await loadItemChildren('1');
      return { items };
    },
  });

  return (
    <TreeSelect onSelectionChange={(k) => console.log(k)}>
      <Label slot="label">Document</Label>
      <Button
        className="w-full flex border border-gray-300 hover:border-gray-400 items-center cursor-pointer
                         rounded-md bg-white transition py-2 pl-4 pr-2 text-left
                         text-gray-700 focus:outline-none focus-visible:ring-2 ring-brand-400/30 ring-offset-1
                         disabled:bg-gray-50 disabled:text-gray-400 disabled:ring-gray-200 disabled:!opacity-100"
      >
        <SelectValue className="flex-1 truncate data-[placeholder]:text-gray-500 text-sm font-normal" />
        <ChevronUpDownIcon
          className="h-5 w-5 text-gray-400"
          aria-hidden="true"
        />
      </Button>
      <Popover className="react-aria-Popover w-[--trigger-width]">
        <Tree
          className="react-aria-Tree -mx-4 -my-2 text-gray-800 focus:bg-transparent outline-none"
          aria-label="Tree"
          items={rootList.items}
        >
          {(item) => (
            <TreeNode hasChildren={item.hasChildren} id={item.id} textValue={item.name}>
              {item.name}
            </TreeNode>
          )}
        </Tree>
      </Popover>
    </TreeSelect>
  );
}