import React, { ReactElement } from 'react';
import { DOMAttributes, FocusableElement } from '@react-types/shared';
import { useOverlayTrigger } from 'react-aria';
import { OverlayTriggerState } from 'react-stately';

import { ModalOpeningButton } from '../Modal/ModalOpeningButton';
import { Icon, IconOptions, ResourceSources } from '../Icons/Icon';
import { uuid, transformSnakeCase } from '../Utils/utils';

interface ResourceItem<T> {
  item: T;
  selected?: boolean;
  label: string;
  type: string;
  childCount?: number;
  previewModalState: OverlayTriggerState;
  onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
  onDrillDown?: (node: T) => void;
  className: string;
  allowedTypes?: string[] | undefined;
  componentIcon?: ReactElement | undefined;
  iconSource?: ResourceSources;
  showChevron?: boolean;
  id?: string;
}

const ResourceItem = <T,>({
  item,
  selected,
  label,
  type,
  childCount,
  previewModalState,
  onSelect,
  onDrillDown,
  className,
  allowedTypes,
  componentIcon,
  iconSource = 'matrix',
  showChevron = false,
  id,
}: ResourceItem<T>) => {
  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(transformSnakeCase(type));
  const title = isDisabled ? "You can't select this item" : label;

  return (
    <li
      className={`squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}
      key={uuid()}
    >
      <ModalOpeningButton
        type="button"
        {...triggerProps}
        isDisabled={isDisabled}
        onPress={() => onSelect(item, overlayProps)}
        aria-label={childCount === undefined ? `Drill down to ${label} children` : ''}
        className={`
          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
          childCount !== undefined && childCount > 0 ? 'mr-2' : ''
        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
        `}
        title={title}
        data-id={id}
      >
        <Icon
          icon={type as IconOptions}
          resourceSource={iconSource}
          aria-label={type}
          className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
          componentIcon={componentIcon}
        />
        <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
          <span className="line-clamp-2 text-left break-word">{label}</span>
          {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
        </span>
        {childCount === undefined && showChevron && (
          <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />
        )}
      </ModalOpeningButton>
      {childCount !== undefined && childCount > 0 && onDrillDown && (
        <button
          type="button"
          aria-label={`Drill down to ${label} children`}
          onClick={() => onDrillDown(item)}
          className={`relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50`}
        >
          <span className="ml-auto flex items-center">
            <span className="truncate w-14 text-right" title={String(childCount)}>
              {childCount}
            </span>
            <Icon icon={'arrow-right' as IconOptions} className="ml-1" />
          </span>
        </button>
      )}
    </li>
  );
};

export { ResourceItem };