import React from 'react';
import classNames from 'classnames/bind';
import styles from './ActivityContentContainer.scss';
import ActivityCard from '@src/components/common/ActivityCard';
import SideFilter from '@src/components/common/filter/SideFilter';
import { IActivity } from 'metarare';
import { EActivity } from '@src/constants/Enums';

const cx = classNames.bind(styles);

interface IOwnProps {
  list?: IActivity[];
  selectedActivityFilter: EActivity[];
  setSelectedFilterType: (filter: EActivity[]) => void;
};

const ActivityContentContainer: React.FC<IOwnProps> = ({
  list,
  selectedActivityFilter,
  setSelectedFilterType
}) => {
  return (
    <>
      <div className={cx('my_activity_group')}>
        <div className={cx('main_section')} style={{ height: list?.length ? 'auto' : '200px' }}>
          <div className={cx('activity_list')}>
            {list?.map(item => (
              <ActivityCard
                key={item.log_relation_id}
                title={item.token_name}
                thumbUrl={item.token_content_url}
                fromUserThumbSrc={item.from_user_profile}
                fromUserName={item.from_user_name}
                toUserThumbSrc={item.to_user_profile}
                toUserName={item.to_user_name}
                createdAt={item.created_at}
                logType={item.log_type}
                price={item.price}
                currency={item.currency}
                isCancle={item.is_cancel}
                toAddress={item.to_address}
                fromAddress={item.from_address}
                saleId={item.sale_id}
                tokenId={item.token_id}
                fromUserIsArtist={item.from_user_is_artist}
                toUserIsArtist={item.to_user_is_artist}
              />
            ))}
          </div>
        </div>
        <div className={cx('side_section')}>
          <SideFilter setSelectedFilterType={setSelectedFilterType} selectedActivityFilter={selectedActivityFilter} />
        </div>
      </div>
    </>
  );
};

export default ActivityContentContainer;
