import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './Activity.scss';

import Tab, { ITab } from '@src/components/common/Tab';
import NFTCardList from '@src/components/common/NFTCardList';
import { EActivityTabType } from '@src/constants/Enums';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserActivity, fetchUserBid, resetBid } from '@src/store/reducers/UserReducer';
import ActivityContentContainer from '@src/containers/common/ActivityContentContainer';
import useMore from '@src/hooks/useMore';
import LoginContainer from '@src/containers/common/LoginContainer';
import useActivityFilter from '@src/hooks/useActivityFilter';

const cx = classNames.bind(styles);

interface IOwnProps { };

const tabList: ITab[] = [{
  title: '내 활동',
  type: EActivityTabType.ACTIVITY
},
{
  title: '내 경매',
  type: EActivityTabType.BID
}];

const Activity: React.FC<IOwnProps> = ({ }) => {
  const dispatch = useDispatch();
  const [selectedTab, setSelectedTab] = useState<string>(tabList[0].type);
  const { activity, bid, userInfo } = useSelector(store => store.user);

  const { activityList, setSelectedActivityFilter, selectedActivityFilter } = useActivityFilter({ activity });

  const dispatchUserBid = (offset: number, limit: number) => {
    dispatch(fetchUserBid({
      offset,
      limit,
    }));
  };

  const { onClickMore, showMore, defaultDisplayCnt, resetPagination } = useMore({ list: bid || [], dispatchFnc: dispatchUserBid });

  useEffect(() => {
    if (userInfo) {
      if (selectedTab === EActivityTabType.ACTIVITY) {
        dispatch(fetchUserActivity(userInfo?.simple_profile.name || ''));
      }

      if (selectedTab === EActivityTabType.BID) {
        dispatch(resetBid());
        resetPagination();
        dispatchUserBid(0, defaultDisplayCnt);
      }
    }
  }, [selectedTab, userInfo]);

  return (
    <div className={cx('activity')}>
      <div className={cx('activity_title')}>활동</div>
      <LoginContainer>
        <>
          <Tab tabList={tabList} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
          {selectedTab === EActivityTabType.ACTIVITY && (
            <div className={cx('activity_group')}>
              <ActivityContentContainer list={activityList} setSelectedFilterType={setSelectedActivityFilter} selectedActivityFilter={selectedActivityFilter} />
            </div>
          )}
          {selectedTab === EActivityTabType.BID && (
            <>
              {!!bid?.length && (
                <div className={cx('my_auction_group')}>
                  <NFTCardList list={bid} onClickMore={onClickMore} showMore={showMore} />
                </div>
              )}
            </>
          )}
        </>
      </LoginContainer>
    </div>
  );
};

export default Activity;
