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

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

import type { DataListContextType } from './context';
import { DataListContext } from './context';
import { DataListEmpty } from './DataListEmpty';
import { DataListItem } from './DataListItem';
import { DataListSection } from './DataListSection';

/** @inheritdoc */
export interface DataListOwnProps extends Partial<DataListContextType> {
  /**
   * Gap space between items.
   * @default false
   */
  gap?: boolean | SafeExtract<Spacing, 'xxs' | 'xs' | 'sm' | 'md'>;
  /**
   * If true, eliminates the default paddings by adding negative margins.
   * @default false
   */
  inset?: boolean;
}

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

const DEFAULT_DENSE = false;
const DEFAULT_GAP = false;

export function getDataListProps<
  P extends DataListOwnProps & {
    className?: string;
  },
>({ className, dense = DEFAULT_DENSE, gap = DEFAULT_GAP, inset = false, disabled = false, ...rest }: P) {
  return {
    'data-disabled': disabled === true ? true : undefined,
    'aria-disabled': disabled === true ? true : undefined,
    ...rest,
    className: classNames(className, 'dataList', {
      'dataList--dense': dense,
      'dataList--inset': inset,
      ['dataList--gap']: gap === true,
      ['dataList--gapXxs']: gap === 'xxs',
      ['dataList--gapXs']: gap === 'xs',
      ['dataList--gapSm']: gap === 'sm',
      ['dataList--gapMd']: gap === 'md',
      ['dataList--noGap']: gap === false,
    }),
  };
}

/**
 * DataList component
 * **⚠️ INTERNAL UI KIT USE ONLY**
 */
export const DataList = Object.assign(
  forwardRef(function DataList(
    { dense = DEFAULT_DENSE, divider = true, disabled = false, gap = DEFAULT_GAP, ...props }: DataListProps,
    forwardedRef: ForwardedRef<HTMLDivElement>
  ) {
    return (
      <DataListContext.Provider value={useMemo(() => ({ dense, divider, disabled }), [dense, divider, disabled])}>
        <div ref={forwardedRef} {...getDataListProps({ ...props, dense, disabled, gap })} />
      </DataListContext.Provider>
    );
  }),
  {
    Item: DataListItem,
    Section: DataListSection,
    Empty: DataListEmpty,
  }
);