import React, { useEffect } from 'react';
import classNames from 'classnames/bind';
import styles from './Home.scss';
import BannerScrollList from '@src/containers/common/BannerScrollList';
import NFTScrollList from '@src/containers/common/NFTScrollList';
import CollectionScrollList from '@src/containers/common/CollectionScrollList';
import useExploreFilter from '@src/hooks/useExploreFilter';
import { useCallbackAwaitStateSync } from 'use-callback-await-state-sync';
import { useDispatch, useSelector } from 'react-redux';
import { fetchExploreHome, resetExploreHome } from '@src/store/reducers/ExploreReducer';
import { fetchHome, fetchHomeArtists } from '@src/store/reducers/HomeReducer';
import Loading from '@src/components/common/Loading';
import useMore from '@src/hooks/useMore';
import ArtistsScrollList from '@src/containers/common/ArtistsScrollList';
import SalesRankingScrollList from '@src/containers/common/SalesRankingscrollList';
import { Link } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';
import { fetchSaleRanking } from '@src/store/reducers/SaleReducer';

const cx = classNames.bind(styles);

const Home: React.FC = () => {
  const dispatch = useDispatch();
  const { data, isLoaded } = useSelector((store) => store.home);
  const { list, isExploreListLoaded } = useSelector((store) => store.explore);
  const { dataRaking } = useSelector((store) => store.sale);
  const { dataArtists } = useSelector((store) => store.home)

  const filterProps = useExploreFilter({ list });
  const dispatchExploreHome = (offset: number, limit: number) => {
    dispatch(
      fetchExploreHome({
        offset,
        limit,
        collection_name: filterProps.collection,
        currency:
          filterProps.maxPrice && filterProps.minPrice
            ? filterProps.selectedCurrency
            : "",
        currency_amount_end: filterProps.maxPrice,
        currency_amount_start: filterProps.minPrice,
        network: filterProps.networkType,
        sale_type: filterProps.saleType,
      })
    );
  };

  const dispatchSaleRanking = () => {
    dispatch(fetchSaleRanking({
      limit: 25
    }))
  } 

  const dispatchHomeArtists = () => {
    dispatch(fetchHomeArtists({
      limit: 1000000
    }))
  }
  const { onClickMore, showMore, resetPagination, defaultDisplayCnt } = useMore({ list, dispatchFnc: dispatchExploreHome, setSelectedFilterType: filterProps.setSelectedFilterType });

  const filterHandler = useCallbackAwaitStateSync(() => {
    dispatch(resetExploreHome());
    resetPagination();
    dispatchExploreHome(0, defaultDisplayCnt);
  });

  useEffect(() => {
    dispatchSaleRanking();
    dispatchHomeArtists();
  }, []);

  useEffect(() => {
    dispatch(resetExploreHome());
    resetPagination();
    dispatchExploreHome(0, defaultDisplayCnt);

    if (!data) {
      dispatch(fetchHome());
    }
  }, [location.pathname]);

  return (
    <div className={cx("home")}>
      {isLoaded ? (
        <Loading />
      ) : (
        <>
          {!!data?.curating_list?.length && (
            <div className={cx("banner_group")}>
              <BannerScrollList list={data.curating_list} />
            </div>
          )}
          {!!data?.special_bids?.length && (
            <div className={cx("home_group")}>
              <strong className={cx("home_title")}>Special Bids 🌟</strong>
              <NFTScrollList list={data.special_bids} />
            </div>
          )}
          {!!data?.hot_bids?.length && (
            <div className={cx("home_group")}>
              <strong className={cx("home_title")}>지금 뜨는 Bids 🚀</strong>
              <NFTScrollList list={data.hot_bids} />
            </div>
          )}
          {!!data?.time_auctions?.length && (
            <div className={cx("home_group")}>
              <strong className={cx("home_title")}>타임옥션 🔥</strong>
              <NFTScrollList list={data.time_auctions} />
            </div>
          )}
          {!!data?.collections?.length && (
            <div className={cx("home_group")}>
              <strong className={cx("home_title")}>인기 콜렉션 🎉</strong>
              <CollectionScrollList list={data.collections} />
            </div>
          )}
          {/* <div className={cx('home_group')}>
            <strong className={cx('home_title')}>탐색하기 🔍</strong>
            <ExploreContentContainer list={filterProps.exploreList} filterProps={filterProps} handler={filterHandler} onClickMore={onClickMore} showMore={showMore} isLoaded={isExploreListLoaded} />
          </div> */}
          <div className={cx("home_group")}>
            <strong className={cx("home_title")}>Registered Artists 🧑‍🎨</strong>
            <ArtistsScrollList list={dataArtists} />
          </div>
          <div className={cx("home_group")}>
            <strong className={cx("home_title")}>
              Sales Ranking 🏆{" "}
              <Link to={URLInfo.RANKING} className={cx("see_more")}>
                See more
              </Link>
            </strong>
            <SalesRankingScrollList list={dataRaking} />
          </div>
        </>
      )}
    </div>
  );
};

export default Home;
