import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './Profile.scss';
import ProfileInfo from '@src/components/common/ProfileInfo';
import ProfileDesc from '@src/components/common/ProfileDesc';
import ListMenu from '@src/components/common/ListMenu';
import Share from '@src/components/common/Share';
import Tab, { ITab } from '@src/components/common/Tab';
import ActivityContentContainer from '@src/containers/common/ActivityContentContainer';
import NFTCardList from '@src/components/common/NFTCardList';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserActivity, fetchUserCollection, fetchUserLike, fetchUserOnSale, fetchUserOwned, fetchUserProfile, removeLike, resetCollection, resetLike, resetOnSale, resetOwned } from '@src/store/reducers/UserReducer';
import useMore from '@src/hooks/useMore';
import CollectionCardList from '@src/components/common/CollectionCardList';
import { useLocation } from 'react-router';
import useActivityFilter from '@src/hooks/useActivityFilter';
import Loading from '@src/components/common/Loading';

const cx = classNames.bind(styles);

interface IOwnProps { };

enum EProfileUserTabType {
  OWNED = 'owned',
  ON_SALE = 'on_sale',
  COLLECTION = 'collection',
  LIKE = 'like',
  ACTIVITY = 'activity',
}

const tabList1: ITab[] = [
  {
    title: '보유중',
    type: EProfileUserTabType.OWNED
  },
  {
    title: '판매중',
    type: EProfileUserTabType.ON_SALE
  },
  {
    title: '컬렉션',
    type: EProfileUserTabType.COLLECTION
  },
  {
    title: '좋아요',
    type: EProfileUserTabType.LIKE
  },
  {
    title: '활동',
    type: EProfileUserTabType.ACTIVITY
  },
];

const tabList2: ITab[] = [
  {
    title: '보유중',
    type: EProfileUserTabType.OWNED
  },
  {
    title: '판매중',
    type: EProfileUserTabType.ON_SALE
  },
  {
    title: '컬렉션',
    type: EProfileUserTabType.COLLECTION
  },
  {
    title: '활동',
    type: EProfileUserTabType.ACTIVITY
  },
];

const ProfileUser: React.FC<IOwnProps> = ({ }) => {
  const location = useLocation();
  const name = location.pathname.split('/')[2];
  const dispatch = useDispatch();
  const { isUserProfileLoaded, activity, collection, like, onSale, owned, profile } = useSelector(store => store.user);
  const [selectedTab, setSelectedTab] = useState<string>(tabList1[0].type);
  const { activityList, setSelectedActivityFilter, selectedActivityFilter } = useActivityFilter({ activity });

  useEffect(() => {
    dispatch(fetchUserProfile(name));
    setSelectedTab(tabList1[0].type);
  }, [location.pathname]);

  // 보유중
  const dispatchOwned = (offset: number, limit: number) => {
    dispatch(fetchUserOwned({
      name,
      filter: {
        offset,
        limit,
      }
    }));
  };
  const { onClickMore: ownedClickMore, showMore: ownedShowMore, resetPagination: ownedResetPagination, defaultDisplayCnt
  } = useMore({ list: owned || [], dispatchFnc: dispatchOwned });

  // 판매중
  const dispatchOnSale = (offset: number, limit: number) => {
    dispatch(fetchUserOnSale({
      name,
      filter: {
        offset,
        limit,
      }
    }));
  };
  const { onClickMore: onSaleClickMore, showMore: onSaleShowMore, resetPagination: onSaleResetPagination
  } = useMore({ list: onSale || [], dispatchFnc: dispatchOnSale });

  // 컬렉션
  const dispatchCollection = (offset: number, limit: number) => {
    dispatch(fetchUserCollection({
      name,
      filter: {
        offset,
        limit,
      }
    }));
  };

  const { onClickMore: collectionClickMore, showMore: collectionShowMore, resetPagination: collectionResetPagination } = useMore({ list: collection || [], dispatchFnc: dispatchCollection });

  // 좋아요
  const dispatchLike = (offset: number, limit: number) => {
    dispatch(fetchUserLike({
      name,
      filter: {
        offset,
        limit,
      }
    }));
  };

  const { onClickMore: likeClickMore, showMore: likeShowMore, resetPagination: likeResetPagination } = useMore({ list: like || [], dispatchFnc: dispatchLike });

  const menuList = [
    {
      title: '신고하기',
      onClick: () => { },
      isDisabled: true
    },
  ];

  useEffect(() => {
    if (selectedTab === EProfileUserTabType.OWNED) {
      dispatch(resetOwned());
      ownedResetPagination();
      dispatchOwned(0, defaultDisplayCnt);
    }

    if (selectedTab === EProfileUserTabType.ON_SALE) {
      dispatch(resetOnSale());
      onSaleResetPagination();
      dispatchOnSale(0, defaultDisplayCnt);
    }

    if (selectedTab === EProfileUserTabType.COLLECTION) {
      dispatch(resetCollection());
      collectionResetPagination();
      dispatchCollection(0, defaultDisplayCnt);
    }

    if (selectedTab === EProfileUserTabType.LIKE) {
      dispatch(resetLike());
      likeResetPagination();
      dispatchLike(0, defaultDisplayCnt);
    }

    if (selectedTab === EProfileUserTabType.ACTIVITY) {
      dispatch(fetchUserActivity(name || ''));
    }
  }, [selectedTab, location.pathname]);

  const handleDisLike = (id: number) => {
    dispatch(removeLike(id));
  };

  return (
    <>
      {isUserProfileLoaded ? (
        <div className={cx('profile')}>
          <div className={cx('banner')} style={{ backgroundImage: profile?.cover_image ? `url('${profile?.cover_image}')` : '' }} />
          <div className={cx('profile_container')}>
            <div className={cx('menu_wrap')}>
              <ListMenu alignLeft={true} list={menuList} />
            </div>
            <div className={cx('share_wrap')}>
              <Share />
            </div>
            <ProfileInfo
              thumbnailImage={profile?.thumbnail_image}
              name={profile?.name}
              address={profile?.address}
              isArtist={!!Number(profile?.is_artist)}
            />
            <div className={cx('desc_wrapper')}>
              <ProfileDesc description={profile?.description} twitter={profile?.twitter} />
            </div>
            <div className={cx('tab_wrapper')}>
              <Tab tabList={profile?.is_owner ? tabList1 : tabList2} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
            </div>
            <div className={cx('list_wrapper')}>
              {selectedTab === EProfileUserTabType.OWNED && (
                <NFTCardList list={owned} onClickMore={ownedClickMore} showMore={ownedShowMore} />
              )}
              {selectedTab === EProfileUserTabType.ON_SALE && (
                <NFTCardList list={onSale} onClickMore={onSaleClickMore} showMore={onSaleShowMore} />
              )}
              {selectedTab === EProfileUserTabType.COLLECTION && (
                <CollectionCardList list={collection} onClickMore={collectionClickMore} showMore={collectionShowMore} />
              )}
              {profile?.is_owner && selectedTab === EProfileUserTabType.LIKE && (
                <NFTCardList list={like} onClickMore={likeClickMore} showMore={likeShowMore} handleDisLike={handleDisLike} />
              )}
              {selectedTab === EProfileUserTabType.ACTIVITY && (
                <ActivityContentContainer list={activityList} setSelectedFilterType={setSelectedActivityFilter} selectedActivityFilter={selectedActivityFilter} />
              )}
            </div>
          </div>
        </div>
      ) : (
        <Loading />
      )}
    </>
  );
};

export default ProfileUser;
