import React, { ReactNode } from 'react';
import '../../../index.scss';
import NoData from '../NoData/NoData';
import Icon from '../Icon';
import classNames from 'classnames';

export interface ListProps {
  /**
   * Data for List
   */
  listItems: Array<ListItemProps>;
  /**
   * Icon position if added
   */
  iconPosition?: 'left' | 'right';
  /**
   * If list item is string then use this props to give its max length
   */
  textMaxWidth?: string;
  /**
   * List onClick function
   */
  onListItemClick: (data: any) => any;
  /**
   * The content that to be displayed if no data not found
   */
  noDataContent: string | ReactNode;
  /**
   * Image that to be displayed if you don't have data
   */
  noDataImage?: string;
  /**
   * Size of the image that to be displayed if you don't have data
   */
  noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
}
export interface ListItemProps {
  /**
   * list item  text
   */
  text: string | ReactNode;
  /**
   * Icon if needed to add in the list
   */
  iconName?: string;
  /**
   * To disable list item set it to true
   */
  disable?: boolean;
}

const List = ({
  listItems,
  iconPosition,
  textMaxWidth = 'auto',
  onListItemClick = () => {},
  noDataContent,
  noDataImage,
  noDataImageSize,
}: ListProps) => {
  return (
    <div className="ff-list">
      {listItems.length > 0 ? (
        listItems.map((listItem) => {
          return (
            <div
              className={classNames(
                'ff-list-item',
                iconPosition && `ff-list-item--${iconPosition}`,
                { 'ff-disabled': listItem.disable }
              )}
              onClick={() => {
                !listItem.disable && onListItemClick(listItem);
              }}
            >
              <div
                style={{ width: textMaxWidth }}
                className={classNames('ff-list-item-text', 'ff-text-truncate')}
              >
                {listItem.text}
              </div>
              {listItem.iconName && (
                <div>
                  <Icon
                    height={14}
                    width={14}
                    name={listItem.iconName}
                    hoverEffect={false}
                  />
                </div>
              )}
            </div>
          );
        })
      ) : (
        <div className="no-data-content">
          <NoData
            image={noDataImage ? noDataImage : 'no_data_found'}
            content={noDataContent}
            size={noDataImageSize}
          />
        </div>
      )}
    </div>
  );
};
export default List;