import Avatar from '../avatar';
import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { List as NextList } from '@alifd/next';
import { ListItemProps as NextListItemProps } from '@alifd/next/types/list';
import { ListProps as NextListProps } from '@alifd/next/types/list';

interface ListProps extends Omit<NextListProps, 'size'> {
  size?: 'small' | 'medium' | 'large';
}

interface ListItemAddProps {
  avatarImg?: string;
  updateTime?: string;
}

interface ListItemProps extends NextListItemProps, ListItemAddProps{}

class ListItem extends Component<ListItemProps> {

  render() {
    const { prefix = 'next-', title, media, className, avatarImg, updateTime, children, ...otherProps } = this.props;

    if (avatarImg) {
      return (
        <NextList.Item
          media = {<Avatar src={avatarImg}/>}
          title = {title}
          className = {cls(className, {
            [`${prefix}only-content-item`]: !title && !media,
            [`${prefix}content-avatar`]: avatarImg,
            [`${prefix}update-time`]: updateTime,
          })}
          {...otherProps}
        >
          {children}
          <div className = {`${prefix}update-time`}> {updateTime} </div>
        </NextList.Item>
      );
    }

    return (
      <NextList.Item
        media = {media}
        title = {title}
        className = {cls(className, {
          [`${prefix}only-content-item`]: !title && !media,
          [`${prefix}only-content-img`]: media && !avatarImg,
        })}
        {...otherProps}
      >
        {children}
        <div className = {`${prefix}update-time`}> {updateTime} </div>
      </NextList.Item>
    );
  }
}

class List extends Component<ListProps> {
  static Item = ConfigProvider.config(ListItem);

  render() {
    const { prefix = 'next-', size = 'medium', className } = this.props;
    return (
      <NextList
        {...this.props}
        size = {size as 'small' | 'medium'}
        className = {cls(className, {
          [`${prefix}large`]: size === 'large',
        })}
      />
    );
  }
}
export default ConfigProvider.config(List);