import {
  TableListItem,
  TableListItemColumn,
  TableListItemProps,
} from '@wix/design-system';
import React, { Children, ReactElement } from 'react';
import {
  RowActionsColumnSlot,
  RowColumnSlot,
  RowColumnSlotProps,
} from './CollectionListChildSlot';
import { assertProp } from '../../utils/assertProp';

type ColumnTransformFn = (
  element: ReactElement<RowColumnSlotProps>,
) => TableListItemColumn;

export interface CollectionListItemProps
  extends Omit<TableListItemProps, 'options'> {
  children?:
    | ReactElement<RowColumnSlotProps>
    | ReactElement<RowColumnSlotProps>[];
  transformColumn?: ColumnTransformFn;
}

export function CollectionListItem(props: CollectionListItemProps) {
  assertProp(props.transformColumn, 'transformColumn', 'CollectionListItem');
  // assertProp(props.className, 'className', 'CollectionListItem');

  const { children = [], transformColumn, ...rest } = props;

  const options = Children.map(children, (element) => {
    const { width, align, value } = transformColumn?.(element) ?? {
      ...element.props,
      value: element.props.children,
    };

    return {
      width,
      align,
      value,
    };
  });

  return <TableListItem {...rest} options={options} />;
}

CollectionListItem.Column = RowColumnSlot;
CollectionListItem.ActionsColumn = RowActionsColumnSlot;