import { Box } from '@wix/design-system';
import React, { ReactElement } from 'react';
import {
  CollectionListItemProps,
  RowActionsColumnSlot,
  RowColumnSlotProps,
} from '../CollectionListItem';

export interface CollectionListHeaderProps {
  element: ReactElement<CollectionListItemProps>;
}

export function CollectionListHeader({ element }: CollectionListHeaderProps) {
  const { type: CollectionListItemComponent, props: collectionListItemProps } =
    element;

  const transformColumn = (columnElement: ReactElement<RowColumnSlotProps>) => {
    const { props } = columnElement;

    const overrides = RowActionsColumnSlot.isElementOf(columnElement)
      ? {
          width: 100,
          align: 'right' as const,
        }
      : {};

    const { title, width, align } = {
      ...props,
      ...overrides,
    };

    return {
      title,
      width,
      align,
      value: <Box>{props.title}</Box>,
    };
  };

  return (
    <CollectionListItemComponent
      {...collectionListItemProps}
      transformColumn={transformColumn}
    />
  );
}