import Isotope from 'isotope-layout';
import { useCallback, useEffect, useRef, useState } from 'react';

const useIsotope = (gridSelector = '.isotope') => {
  const isotope = useRef<Isotope>();
  const [filterKey, setFilterKey] = useState('');

  useEffect(() => {

    if (typeof window === undefined) return;

    (async function () {
      const Isotope = (await import('isotope-layout')).default;
      const grids = document.querySelectorAll('.grid');

      if (grids !== null) {
        grids.forEach((g) => {
          const grid = g.querySelector(gridSelector) as HTMLElement;
          if (grid) {
            isotope.current = new Isotope(grid, {
              itemSelector: '.item',
              layoutMode: 'masonry',
              masonry: { columnWidth: grid.offsetWidth / 12 },
              percentPosition: true,
              transitionDuration: '0.7s'
            });
            
            setTimeout(()=>{
              setFilterKey("*")
            },3000)
           
           
          }
        });
      }
    })();

    return () => isotope.current?.destroy();
  }, []);

  useEffect(() => {
    const filtered = filterKey === '*' ? { filter: '*' } : { filter: filterKey };
 
    isotope.current?.arrange(filtered);
  }, [filterKey]);

  const updateIsotope = useCallback((key: string, selector = '.isotope') => {
    if (typeof window === undefined) return;

    (async function () {
      const Isotope = (await import('isotope-layout')).default;
      const grids = document.querySelectorAll('.grid');

      if (grids !== null) {
        grids.forEach((g) => {
          const grid = g.querySelector(gridSelector) as HTMLElement;

          if (grid) {
            isotope.current = new Isotope(grid, {
              itemSelector: '.item',
              layoutMode: 'masonry',
              masonry: { columnWidth: grid.offsetWidth / 12 },
              percentPosition: true,
              transitionDuration: '0.7s'
            });
          }
          isotope.current?.arrange({filter:""});
          setTimeout(()=>{
            if (key) {
              const filtered = key === '*' ? { filter: '*' } : { filter: key };
              isotope.current?.arrange(filtered);
            }
          },1000)
          
        });
      }
    })();

    return () => isotope.current?.destroy();
  }, []);
  // change filter item
  const handleFilterKeyChange = (key: string) => () => setFilterKey(key);

  return { handleFilterKeyChange, filterKey, updateIsotope };
};

export default useIsotope;