import NFTSearcher from "nft-searcher"
import { useState, useEffect, useCallback } from "react";

export default function NFTSearcherPackNOSSR(){
  const [fetchedNFTs, setFetchedNFTs] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

    const handleNFTsFetched = useCallback((nfts: any[]) => {
    setLoading(true);
    setFetchedNFTs(nfts);
    setInterval(() => {
        setLoading(false);
    }, 1000);
}, [setLoading, setFetchedNFTs]);

  return (
    <div>
      <NFTSearcher 
        activeNetwork={"ethereum"}
        theme={"dark"}
        onNFTsFetched={handleNFTsFetched}
        />
    </div>
  )
}

import dynamic from "next/dynamic";
const NFTSearcherPackNOSSR = dynamic(() => import('../components/NFTSearcher/Searcher'), { ssr: false });

export default function Home() {
  return (
    <div>
      <NFTSearcherPackNOSSR />
    </div>
  )
}

import NFTSearcher from 'nft-searcher';

<NFTSearcher
  activeNetwork={"ethereum"}
  limit={10}
  start={0}
  where={[]} // for nft-indexer collections only, not used for thirdweb contract fetches
  select={"*"} // for nft-indexer collections only, not used for thirdweb contract fetches
  dbURL={""} // for nft-indexer collections only, not used for thirdweb contract fetches
  theme={"dark"} // or "light"
  onNFTsFetched={(nfts) => console.log(nfts)}
  style={{
    searchContainer: {
      backgroundColor: '#f5f5f5',
      padding: '10px',
    },
    searchInput: {
      fontSize: '18px',
      padding: '10px',
    },
    searchButton: {
      backgroundColor: '#007bff',
      color: 'white',
      padding: '10px 20px',
    },
    resultsContainer: {
      marginTop: '20px',
    },
    resultItem: {
      borderBottom: '1px solid #ddd',
      padding: '10px 0',
    },
  }}
  classNames={{
    searchContainer: 'my-search-container',
    searchInput: 'my-search-input',
    searchButton: 'my-search-button',
    resultsContainer: 'my-results-container',
    resultItem: 'my-result-item',
  }}
/>

import styles from './NFTCard.module.css';
import Image from 'next/image';
import { MediaRenderer } from "@thirdweb-dev/react";
import { useEffect, useState } from 'react';

interface Props {
  nft: any;
  network: string;
  onAttributeSelect: (selectedAttribute: string, tokenStart: number) => Promise<void>;
  tokenStart: number;
}

interface Attribute {
  trait_type: string;
  value: string;
}

export default function NFTCard({ nft, network, onAttributeSelect, tokenStart}: Props) {

  const handleAttributeClick = (attribute: string) => {
    onAttributeSelect(attribute, tokenStart); 
  };

  return (
    <>
    {nft?.metadata?.name !== "Failed to load NFT metadata" &&
      <div className={styles.container}>
        <div className={styles.item}>
          <h4 className={styles.heading}>{nft.name || nft?.metadata?.name}</h4>
          <MediaRenderer src={nft.image || nft?.metadata?.image} alt="image" height="233px" width="233px" />
          <table className={styles.table}>
            <tbody>
            {nft.metadata && nft.metadata.attributes!==undefined ? Object.entries(nft.metadata.attributes).map(([_, attribute]: [string, any], i) => {
              const traitType = (attribute as Attribute).trait_type;
              const value = (attribute as Attribute).value;
              return (
                  <tr key={i} onClick={() => handleAttributeClick(`"${traitType}" = "${String(value)}"`)}>
                      <td>{traitType}</td>
                      <td>{String(value)}</td>
                  </tr>
              );
            }
            ) : nft.attributes && (
              Object.entries(nft.attributes).map(([key, value], i) => {
                return (
                  <tr key={i} onClick={() => handleAttributeClick(`"${key}" = "${String(value)}"`)}>
                      <td>{key}</td>
                      <td>{String(value)}</td>
                  </tr>
                );
              })
            )}
            </tbody>
          </table>
        </div>
      </div>
    }
    </>
  );
}

import React, { useState } from 'react';
import styles from './Filter.module.css'; // Import your CSS file
import {FilterSVG} from './FilterSVG';
import { useEffect } from 'react';

interface Props {
    attributes: Attributes;
    onAttributeSelect: (attribute: string, startToken: number) => void;
}

interface Attributes {
    [key: string]: string[];
  }

export default function Filter({ attributes, onAttributeSelect}: Props){
  const [showPopup, setShowPopup] = useState(false);
  const [startToken, setStartToken] = useState(0);
  const [totalNFTs, setTotalNFTs] = useState(10000);

  const togglePopup = () => setShowPopup(!showPopup);

    const handleSelection = (e:any) => {
        const selectedName = e.target.getAttribute('data-attribute-label');
        const selectedValue = e.target.value;
        const finalSelection = `"${selectedName}" = "${selectedValue}"` !== undefined ? `"${selectedName}" = "${selectedValue}"` : "";
        onAttributeSelect(finalSelection, startToken);
    };

    const handleTokenChange = (e:any) => {
        const newStartToken = e.target.value;
        setStartToken(newStartToken);
        const finalSelection = "";
        onAttributeSelect(finalSelection, newStartToken);
    };


  return (
    <div className={styles.popupContainer}> 
      <button className={styles.togglePopup} onClick={togglePopup}>
        <FilterSVG />
      </button>
      {showPopup && (
        <div className={styles.popup}>
          <div className={styles.popupItem}>
            <label>Token Start</label>
            <select 
            id="tokenStart" 
            name="tokenStart"
            value={startToken} 
            onChange={handleTokenChange}
            >
                <option value={0}>{0}</option>
                <option value={50}>{50}</option>
             {
                Array.from({ length: Math.ceil(totalNFTs / 100) }, (_, index) => (
                <option key={index} value={(index + 1) * 100}>{(index + 1) * 100}</option>
                ))
            }
            </select>
          </div>
          <div className={styles.popupItem}>
            <label>Traits</label>
            {Object.entries(attributes).map(([attributeLabel, values], index) => (
              <select 
                key={index} 
                data-attribute-label={attributeLabel} 
                onChange={handleSelection}
              >
                <optgroup label={attributeLabel}>
                {Array.isArray(values) && values.map((value, valueIndex) => (
                <option key={valueIndex} value={value}>{value}</option>
                ))}
                </optgroup>
              </select>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export const FilterSVG: React.FC = () => {
    return (
    <div>
    <svg 
        width="24" 
        height="24" 
        viewBox="0 0 24 24" 
        fill="none" 
        xmlns="http://www.w3.org/2000/svg"
    >
        <line x1="2" y1="6" x2="22" y2="6" stroke="black" strokeWidth="2"/>
        <line x1="4" y1="12" x2="20" y2="12" stroke="black" strokeWidth="2"/>
        <line x1="6" y1="18" x2="18" y2="18" stroke="black" strokeWidth="2"/>
        </svg>
    </div>
    );
};

import React from 'react';
import styles from './NFTInfo.module.css'; // Ensure this path is correct

interface NFTInfoProps {
  data: string | { [key: string]: any };  // Accepting either a JSON string or an object
}

const NFTInfo: React.FC<NFTInfoProps> = ({ data }) => {
  const jsonData = typeof data === 'string' ? JSON.parse(data) : data;

  const formatTitle = (key: string) => {
    return key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  };

  const renderData = (obj: { [key: string]: any }) => {
    return Object.keys(obj).map((key) => {
      const value = obj[key];
      if (typeof value === 'object' && value !== null) {
        return (
          <div key={key} className={styles.item}>
            <strong>{formatTitle(key)}:</strong>
            <div style={{ marginLeft: '20px' }}>{renderData(value)}</div>
          </div>
        );
      } else {
        return (
          <div key={key} className={styles.item}>
            <strong>{formatTitle(key)}:</strong> {value}
          </div>
        );
      }
    });
  };

  return <div className={styles.container}>{renderData(jsonData)}</div>;
};

export default NFTInfo;

import NFTSearcher from "nft-searcher"
import { useState, useEffect, useCallback } from "react";
import styles from "./Searchbar.module.css";
import NFTCard from "../NFTCard/NFTCard";
import Filter from "../Filter/Filter";
import Image from "next/image";
import { useChain, ConnectWallet } from "@thirdweb-dev/react";
import NFTInfo from "../NFTInfo/NFTInfo";

interface Attributes {
  [key: string]: string[];
}

export default function NFTSearcherPackNOSSR(){
  const [fetchedNFTs, setFetchedNFTs] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [darkMode, setDarkMode] = useState<boolean>(false);
  const [attributes, setAttributes] = useState<Attributes>({});
  const [allNFTs, setAllNFTs] = useState<any[]>([]);
  const chain = useChain();
  const [network, setNetwork] = useState<string>("");
  const [aiAnalysis, setAiAnalysis] = useState(null);

  // set network and feed into searcher tool
  useEffect(() => {
    if (chain && chain.chain.toLowerCase() === "eth") {
      setNetwork("ethereum");
    } else if (chain && chain.chain.toLowerCase() === "polygon") {
      setNetwork("polygon");
    } else if (chain && chain.chain.toLowerCase() === "avax") {
      setNetwork("avalanche");
    } else if (chain && chain.chain.toLowerCase() === "ftm") {
      setNetwork("fantom");
    }
  }, [chain]);

  const extractAttributes = useCallback((nfts: any[]) => {
    const attributeMap: Attributes = {};
    nfts.forEach(nft => {
      if (nft.metadata && nft.metadata.attributes) {
        nft.metadata.attributes.forEach((attribute: any) => {
          if (!attributeMap[attribute.trait_type]) {
            attributeMap[attribute.trait_type] = [];
          }

          if (!attributeMap[attribute.trait_type].includes(attribute.value)) {
            attributeMap[attribute.trait_type].push(attribute.value);
          }
        });
       } else if (nft.attributes) {
          Object.entries(nft.attributes || {}).forEach(([key, value]) => {
            if (!attributeMap[key]) {
              attributeMap[key] = [];
            }

            if (typeof value === 'string' && !attributeMap[key].includes(String(value))) {
              attributeMap[key].push(value);
            }
          });
        }
      });

    return attributeMap;
  }, []);

  const handleNFTsFetched = useCallback((nfts: any[]) => {
    setLoading(true);
    setFetchedNFTs(nfts);
    setAllNFTs(nfts);
    const attributes = extractAttributes(nfts);
    setAttributes(attributes);
    setInterval(() => {
        setLoading(false);
    }, 1000);
}, [setLoading, setFetchedNFTs, setAllNFTs, setAttributes, extractAttributes]);

  console.log("fetchedNFTs", fetchedNFTs);

  // search params
  const [limit, setLimit] = useState<number>(100);
  const [start, setStart] = useState<number>(0);
  const [where, setWhere] = useState<any[]>([]); //only required for nft-indexer searches, does not apply thirdweb contract searches
  const [select, setSelect] = useState<string>("*"); //only required for nft-indexer searches, does not apply thirdweb contract searches

  const handleAttributeFromCard = async (selectedAttribute:string, tokenStart:number) => {
    setStart(tokenStart);
      const updateNFTs = fetchedNFTs.filter((nft) => {
        if (nft.metadata && nft.metadata.attributes) {   
          return nft.metadata.attributes.some((attribute: any) => {
            return selectedAttribute.includes(attribute.trait_type) && selectedAttribute.includes(attribute.value);
          });
        } else if (nft.attributes) {
            const whereNew = selectedAttribute !== "" ? [selectedAttribute] as any[] : [] as any[];
            setWhere(whereNew);
          return Object.entries(nft.attributes || {}).some(([key, value]) => {
            return selectedAttribute.includes(key) && selectedAttribute.includes(String(value));
          });
          }
      });
      setFetchedNFTs(updateNFTs);
  }

  const handleClearSearch = () => {
    const clear = "";
    handleAttributeFromCard(clear, 0);
    setFetchedNFTs(allNFTs);
  }


  // fetch AI analysis
  useEffect(() => {
    const fetchAIAnalysis = async () => {
      if (fetchedNFTs && fetchedNFTs.length > 0) {
        const tokenName = fetchedNFTs[1]?.metadata?.name ? fetchedNFTs[1].metadata.name : fetchedNFTs[1].name;
        const tokenDescription = fetchedNFTs[1]?.metadata?.description ? fetchedNFTs[1].metadata.description : fetchedNFTs[1].description;
          try {
            const response = await fetch('/api/openai', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({tokenName, tokenDescription}),
            });
          
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
    
            const data = await response.json();
            setAiAnalysis(data.data);
          } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
          }
      }
    }
    fetchAIAnalysis();
  }, [fetchedNFTs]);


  return (
    <>
    <h1 className={styles.mainHeading}>A searchbar for 
      <a href="https://thirdweb.com"
        target="_blank"
        rel="noopener noreferrer"
        className={styles.link}
      > thirdweb </a> 
      projects & more
    </h1>
    <h3 className={styles.heading}>yarn add nft-searcher</h3>
    <div className={styles.container}>
      <div className={styles.mixtape}> 
        <button className={styles.button} onClick={() => setDarkMode(!darkMode)}>Toggle Searchbar Theme</button>
        <NFTSearcher 
            activeNetwork={network}
            theme={darkMode ? "dark" : "light"} // "light" or "dark"
            onNFTsFetched={handleNFTsFetched}
            limit={limit}
            start={start}
            where={where}
            select={select}
        />
      </div>
      <div className={styles.console}>
        <h4>NFT Console</h4>
        {fetchedNFTs.length === 0 ? (
          <p>No NFTs fetched yet...</p>
        ) : (
          <>
            {!loading ? fetchedNFTs.map((nft, index) => (
                <div key={index}>
                  <pre>{JSON.stringify(nft, null, 2)}</pre>
                </div>
            ))
            : <div style={{ marginLeft: "auto", marginRight: "auto", }}>Loading...</div>}
          </>
        )}
      </div>
    </div>
    <div className={styles.aiconsole}>
      {aiAnalysis ? (
          <div>
            <h3>OpenAI generated Collection Insights</h3>
            <NFTInfo data={aiAnalysis} />
          </div>
        )
        :  
        <div>
          <h3>OpenAI generated Collection Insights</h3>
          <p>Search a collection to generate insights...</p> 
        </div>
      }
      </div>
    <div className={styles.selectorContainer}>
      <Filter attributes={attributes} onAttributeSelect={handleAttributeFromCard}></Filter>
      <p className={styles.instructions}>&larr; filter by token and trait or reset trait selection &rarr;</p>
      <div className={styles.selection}>
          <button className={styles.resetBtn} onClick={handleClearSearch}><Image src="/images/reset.png" width={22} height={22} alt="reset"/></button>
      </div> 
    </div>
    <div className={styles.gridContainer}>
      <div className={styles.grid}>
        {fetchedNFTs.length === 0 ? (
            <p>No NFTs fetched yet...</p>
        ) : fetchedNFTs && fetchedNFTs.length > 0 ? (
            fetchedNFTs.map((nft, i) => (
                <NFTCard 
                nft={nft} 
                key={i} 
                network={network} 
                tokenStart={start}
                onAttributeSelect={handleAttributeFromCard}
                ></NFTCard>
            ))
        ) : ( <div style={{ marginLeft: "auto", marginRight: "auto", }}>Loading...</div>)}
      </div>
    </div>
  </>
  

  )
}