import type { ForwardedRef, HTMLAttributes } from 'react';
import React, { forwardRef } from 'react';
import classNames from 'classnames';

import type { SafeExtract, Spacing } from '../../types';

import type { DataListContextType } from './context';
import { useDataListContext } from './context';
import { DataListItemCell } from './DataListItemCell';

const DEFAULT_DIVIDER = true;
const DEFAULT_DISABLED = false;

/** @inheritdoc */
export interface DataListItemOwnProps extends Partial<Pick<DataListContextType, 'dense' | 'divider' | 'disabled'>> {
  /**
   * Gap between items
   *
   * By default, `sm` size when true.
   *
   * @type boolean | 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
   * @default true
   */
  gap?: boolean | SafeExtract<Spacing, 'xxs' | 'xs' | 'sm' | 'md'>;
}

/** @inheritdoc */
export interface DataListItemProps extends DataListItemOwnProps, Omit<HTMLAttributes<HTMLDivElement>, 'className'> {}

export function getDatalistItemProps<
  P extends DataListItemOwnProps & {
    className?: string;
  },
>({ className, divider = DEFAULT_DIVIDER, dense = false, disabled = DEFAULT_DISABLED, gap = true, ...rest }: P) {
  return {
    'data-disabled': disabled === true ? true : undefined,
    'aria-disabled': disabled === true ? true : undefined,
    ...rest,
    className: classNames(className, 'dataList__item', {
      'dataList__item--hasDivider': divider,
      'dataList__item--dense': dense,
      ['dataList__item--gap']: gap === true,
      ['dataList__item--gapXxs']: gap === 'xxs',
      ['dataList__item--gapXs']: gap === 'xs',
      ['dataList__item--gapSm']: gap === 'sm',
      ['dataList__item--gapMd']: gap === 'md',
      ['dataList__item--noGap']: gap === false,
    }),
  };
}

/**
 * DataList.Item component
 * **⚠️ INTERNAL UI KIT USE ONLY**
 */
export const DataListItem = Object.assign(
  forwardRef(function Option(
    { divider, disabled, ...props }: DataListItemProps,
    forwardedRef: ForwardedRef<HTMLDivElement>
  ) {
    const { divider: contextDivider, disabled: contextDisabled } = useDataListContext();

    return (
      <div
        ref={forwardedRef}
        {...getDatalistItemProps({
          ...props,
          divider: divider ?? contextDivider ?? DEFAULT_DIVIDER,
          disabled: disabled ?? contextDisabled ?? DEFAULT_DISABLED,
        })}
      />
    );
  }),
  {
    displayName: 'DataList.Item',
    Cell: DataListItemCell,
  }
);