import { INFT } from "metarare";
import React, { useMemo } from "react";
import ExploreFilter, {
  IExploreFilter
} from "../../components/common/filter/ExploreFilter";
import NFTCardList from "../../components/common/NFTCardList";
import classNames from "classnames/bind";
import styles from "./ExploreContentContainer.scss";

const cx = classNames.bind(styles);

interface IOwnProps {
  list: INFT[];
  filterProps: IExploreFilter;
  handler?: () => void;
  onClickMore: () => void;
  showMore: boolean;
  isLoaded: boolean;
}

const ExploreContentContainer: React.FC<IOwnProps> = ({
  list,
  filterProps,
  handler,
  onClickMore,
  showMore,
  isLoaded
}) => {
  const hideFromListIds = [
    12910, 12911, 12912, 12913, 12915, 12916, 12917, 12918, 12919, 12920, 12921,
    12922, 12923, 12924, 12925, 12926, 12927, 12928, 12929, 12930, 12934, 12935,
    12936, 12937, 12938, 12939, 12940, 12941, 12942, 12943, 12946, 12947, 12948,
    12949, 12950, 12956, 12957, 12958, 12959, 12960
  ];

  const listAfterHide = useMemo(() => {
    return list.filter((item) => {
      return !hideFromListIds.includes(item.sale_id);
    });
  }, [list]);
  return (
    <>
      <ExploreFilter {...filterProps} handler={handler} />
      {!!listAfterHide.length ? (
        <NFTCardList
          list={listAfterHide}
          onClickMore={onClickMore}
          showMore={showMore}
          isLoaded={isLoaded}
        />
      ) : (
        <>
          {isLoaded && (
            <div className={cx("no_item")}>
              <span className={cx("text")}>찾으시는 아이템이 없습니다</span>
            </div>
          )}
        </>
      )}
    </>
  );
};

export default ExploreContentContainer;
