import type { FC, ReactNode, CSSProperties } from 'react';
import React from 'react';
import cx from 'classnames';
import flattenChildren from 'react-keyed-flatten-children';
import { Divider } from '../divider';
import { Metadata } from '../metadata';
import type { MetadataProps } from '../metadata';

const CLASS_NAME = 'MetadataList';

export type MetadataListItem = Omit<MetadataProps, 'children'> & { value: ReactNode };

export type MetadataListProps = {
    className?: string;
    style?: CSSProperties;
    testId?: string;
    /**
     * Gap between the list items and the dividers
     * @default 10px
     */
    gap?: CSSProperties['gap'];
} & (
    | {
          items: MetadataListItem[];
          children?: never;
      }
    | {
          children: React.ReactNode;
          items?: never;
      }
);

/**
 * Horizontal, divided list of Metadata items or other molecules
 *
 * @tags utilities
 * @status live
 * @type molecule
 */
export const MetadataList: FC<MetadataListProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    items,
    gap,
    children,
}) => {
    let elements: ReactNode[] = [];
    if (items)
        elements = items.map(({ value, ...item }, index) => {
            const label = typeof item.label === 'string' ? item.label : item.label.text;
            return (
                <Metadata {...item} key={`${label}-${index}`}>
                    {value}
                </Metadata>
            );
        });
    else elements = flattenChildren(children);

    return (
        <div
            data-testid={testId}
            className={cx(CLASS_NAME, className)}
            style={
                {
                    '--metadata-list-gap': gap,
                    ...style,
                } as CSSProperties
            }
        >
            {elements
                .flatMap((element, index) => [element, <Divider key={`divider${index}`} />])
                .slice(0, -1)}
        </div>
    );
};