import React from 'react';
import ListItemSmall from './list-item-small';
import ListItemMiddle from './list-item-middle';
import ListItemLarge from './list-item-large';
import ListItemHalf from './list-item-half';
import ListItemSharp from './list-item-sharp';
import ListItemLine from './list-item-line';
import connect from "../connect";

/**
 * 属性类型
 */
export interface ListItemProps {
  type:
    | 'small' // 小尺寸
    | 'middle' // 中尺寸
    | 'large' // 大尺寸
    | 'half' // 一行两个
    | 'sharp' // 锐利背景
    | 'line'; // 行排列
}

/**
 * 列表项
 */
const ListItem: React.FC<ListItemProps> = ({ type, ...otherProps }) => {
  if (type === 'small') return <ListItemSmall {...otherProps} />;
  if (type === 'middle') return <ListItemMiddle {...otherProps} />;
  if (type === 'large') return <ListItemLarge {...otherProps} />;
  if (type === 'half') return <ListItemHalf {...otherProps} />;
  if (type === 'sharp') return <ListItemSharp {...otherProps} />;
  if (type === 'line') return <ListItemLine {...otherProps} />;
  return null;
};

export default connect(ListItem, {}, {
  'small': (ListItemSmall as any).default,
  'middle': (ListItemMiddle as any).default,
  'large': (ListItemLarge as any).default,
  'half': (ListItemHalf as any).default,
  'sharp': (ListItemSharp as any).default,
  'line': (ListItemLine as any).default,
});