import { observer } from 'mobx-react-lite';
import React, { useCallback, useEffect } from 'react';
import { useIsClient } from 'usehooks-ts';

import { LIBRARY_FILTER_KEYS } from '@/components/library/constants';
import { LibraryStore } from '@/state/libraryStore';

import BaseMultiSelectDropdown from './BaseMultiSelectDropdown';

interface LibraryMultiSelectDropdownV2Props {
  library: LibraryStore;
}

const LibraryMultiSelectDropdownV2: React.FC<LibraryMultiSelectDropdownV2Props> =
  observer(({ library }) => {
    // Read URL parameters on component mount and apply filters
    const isClient = useIsClient();
    useEffect(() => {
      if (isClient) {
        const urlParams = new URLSearchParams(window.location.search);
        const filters: Record<string, boolean> = {};

        // Read URL parameters and convert to boolean filters
        LIBRARY_FILTER_KEYS.forEach((key) => {
          if (urlParams.has(key)) {
            filters[key] = urlParams.get(key) === 'true';
          }
        });

        // Apply filters if any were found in URL
        if (Object.keys(filters).length > 0) {
          library.updateFilters(filters);
        }
      }
    }, [library, isClient]);

    const updateFilters = useCallback(
      (filters: Partial<typeof library.filters.clips>) => {
        library.updateFilters(filters);

        if (typeof window !== 'undefined') {
          const urlParams = new URLSearchParams(window.location.search);

          // Update URL parameters for each filter
          Object.entries(filters).forEach(([filterKey, filterVal]) => {
            if (
              filterKey === 'page' ||
              filterKey === 'query' ||
              !LIBRARY_FILTER_KEYS.includes(filterKey)
            ) {
              return;
            }

            if (urlParams.has(filterKey) && !filterVal) {
              urlParams.delete(filterKey);
            } else if (filterVal) {
              urlParams.set(filterKey, filterVal.toString());
            }
          });

          window.history.pushState({}, '', `?${urlParams.toString()}`);
        }
      },
      [library, isClient]
    );

    const clearFilters = useCallback(() => {
      library.clearFilters();

      if (isClient) {
        const urlParams = new URLSearchParams(window.location.search);
        LIBRARY_FILTER_KEYS.forEach((key) => {
          urlParams.delete(key);
        });

        window.history.pushState({}, '', `?${urlParams.toString()}`);
      }
    }, [library, isClient]);

    return (
      <BaseMultiSelectDropdown
        store={{
          filters: library.filters.clips,
          updateFilters,
          clearFilters,
        }}
        actionName='LibraryMultiSelectDropdownClicked'
        flags={{ show_scenes_filters: true }}
      />
    );
  });

export default LibraryMultiSelectDropdownV2;