'use client';

import { cn } from '@/lib/utils';
import Image from 'next/image';
import { Chip } from '@/components/ui/chip';
import { useHomeStore } from '../store';
import { useQuery } from '@tanstack/react-query';
import { fetchCharacterTags } from '@/services/editor';
import { useRef } from 'react';
import { useTranslations } from 'next-intl';

const Filter = () => {
  const tab = useHomeStore((state) => state.tab);
  const setTab = useHomeStore((state) => state.setTab);
  const ref = useRef<HTMLDivElement>(null);
  const selectedTags = useHomeStore((state) => state.selectedTags);
  const setSelectedTags = useHomeStore((state) => state.setSelectedTags);
  const t = useTranslations('home');

  // useEffect(() => {
  //   const mainContent = document.getElementById('main-content');
  //   if (!mainContent) {
  //     return;
  //   }
  //   const handleScroll = () => {
  //     const scrollTop = mainContent.scrollTop;
  //     console.log('scrollTop', scrollTop, ref.current);
  //     const className = 'absolute bg-bg-primary-normal';
  //     if (scrollTop > 248) {
  //       ref.current?.classList.add('absolute bg-bg-primary-normal');
  //     } else {
  //     }
  //   };
  //   mainContent?.addEventListener('scroll', handleScroll);
  //   return () => {
  //     mainContent?.removeEventListener('scroll', handleScroll);
  //   };
  // }, []);

  const { data: tags = [] } = useQuery({
    queryKey: ['tags', tab],
    queryFn: async () => {
      if (tab === 'character') {
        const { data } = await fetchCharacterTags({ limit: 10 });
        return data.rows;
      }
      return [];
    },
  });

  const tabs = [
    {
      label: t('story'),
      value: 'story',
      icon: 'icon-story',
      activeIcon: 'icon-story-active',
    },
    {
      label: t('character'),
      value: 'character',
      icon: 'icon-character',
      activeIcon: 'icon-character-active',
    },
  ] as const;

  const handleSelect = (tagId: string) => {
    if (selectedTags.includes(tagId)) {
      setSelectedTags(selectedTags.filter((id) => id !== tagId));
    } else {
      setSelectedTags([...selectedTags, tagId]);
    }
  };

  return (
    <div ref={ref}>
      <div className="flex mb-6 gap-12">
        {tabs.map((item) => {
          const active = tab === item.value;
          return (
            <div
              key={item.value}
              onClick={() => setTab(item.value)}
              className={cn(
                'flex items-center cursor-pointer gap-2',
                active ? 'text-txt-primary-normal' : 'text-txt-secondary-normal'
              )}
            >
              <Image
                src={`/images/home/${active ? item.activeIcon : item.icon}.png`}
                alt={item.label}
                width={28}
                height={28}
              />
              <span className="txt-headline-s">{item.label}</span>
            </div>
          );
        })}
      </div>
      <div className="flex flex-wrap gap-2">
        {tags?.map((tag: any) => (
          <Chip
            key={tag.id}
            size="small"
            className="px-4"
            state={selectedTags.includes(tag.id) ? 'active' : 'inactive'}
            onClick={() => handleSelect(tag.id)}
          >
            # {tag.name}
          </Chip>
        ))}
      </div>
    </div>
  );
};

export default Filter;
