import React from 'react'
import { View } from '../view'
import { Text } from '../text'

/**
 * Vertical list container — rows use {@link ListItem} (storage-style resource rows).
 */
export function List ({ children, ...props }) {
  return (
    <View stack {...props}>
      {children}
    </View>
  )
}

/**
 * @param {{
 *   onClick?: (event: import('react').MouseEvent) => void,
 *   href?: string,
 *   selectable?: boolean,
 *   selected?: boolean,
 *   leading?: import('react').ReactNode,
 *   trailing?: import('react').ReactNode,
 *   meta?: import('react').ReactNode,
 *   density?: 'compact' | 'comfortable',
 *   children?: import('react').ReactNode,
 *   'data-testid'?: string,
 * }} props
 */
export function ListItem ({
  onClick,
  href,
  selectable,
  selected,
  leading,
  trailing,
  meta,
  density = 'compact',
  children,
  ...props
}) {
  const comfortable = density === 'comfortable'
  const mainProps = {
    gap: 'm',
    layout: 'row',
    alignItems: 'center',
    inset: 'list-row-leading',
    style: { flexGrow: 1, minWidth: 0, textDecoration: 'none', color: 'inherit', alignItems: comfortable ? 'flex-start' : 'center' },
    ...(href ? { as: 'a', href } : {}),
    onClick,
  }

  return (
    <View
      layout="row"
      selectable={selectable}
      data-selected={selected || undefined}
      gap="m"
      style={{
        height: comfortable ? undefined : '56px',
        minHeight: comfortable ? '72px' : undefined,
        flexShrink: 0,
        borderBottom: '1px solid var(--separator-primary)',
        padding: comfortable ? 'var(--space-s) 0' : undefined,
      }}
      {...props}
    >
      <View {...mainProps}>
        {leading}
        {typeof children === 'string' || typeof children === 'number'
          ? <Text style={{ flexShrink: 1, minWidth: 0 }}>{children}</Text>
          : children}
        <View style={{ flexGrow: 1 }} />
        {meta}
      </View>
      {trailing ? (
        <View inset="list-row-trailing">
          {trailing}
        </View>
      ) : null}
    </View>
  )
}

List.Item = ListItem