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

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

import { getTypographyProps } from '../Typography/getTypographyProps';

import type { DataListItemOwnProps } from './DataListItem';
import { getDataListCellProps } from './DataListItemCell';

/** @inheritdoc */
export interface DataListSectionHeaderOwnProps extends Pick<DataListItemOwnProps, 'gap'> {}

/** @inheritdoc */
export interface DataListSectionHeaderProps
  extends DataListSectionHeaderOwnProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {}

export function getDataListSectionHeaderProps<
  P extends DataListSectionHeaderProps & {
    className?: string;
  },
>({ gap = true, className, ...rest }: P) {
  return {
    ...rest,
    className: classNames(className, 'dataList__sectionHeader', {
      ['dataList__sectionHeader--gap']: gap === true,
      ['dataList__sectionHeader--gapXxs']: gap === 'xxs',
      ['dataList__sectionHeader--gapXs']: gap === 'xs',
      ['dataList__sectionHeader--gapSm']: gap === 'sm',
      ['dataList__sectionHeader--gapMd']: gap === 'md',
      ['dataList__sectionHeader--noGap']: gap === false,
    }),
  };
}

export const DataListSectionHeader = Object.assign(
  forwardRef(function DataListSectionHeader(
    props: DataListSectionHeaderProps,
    forwardedRef: React.ForwardedRef<HTMLDivElement>
  ) {
    const { children, ...rest } = getDataListSectionHeaderProps(props);

    return (
      <header ref={forwardedRef} {...rest}>
        <CoreText {...getTypographyProps({ appearance: 'sm', ...getDataListCellProps(props) })}>{children}</CoreText>
      </header>
    );
  }),
  {
    displayName: 'DataList.Section.Header',
  }
);