import { useEffect } from 'react';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import ArticleItem from './ArticleItem';
import {
    setArticlesNameFilter,
    setArticlesTagFilter,
    setMenuActivePage,
} from '../../../redux/slices/store';
import { useNavigate } from 'react-router-dom';
import { fetchArticles } from '../../../redux/slices/articles';
import Filters from './Filter';

const Articles = () => {
    const dispatch = useAppDispatch();
    const navigate = useNavigate();

    // ✅ Берём данные из нового состояния
    const articles = useAppSelector(
        (state) => state.articles.fetchArticles.articles,
    );
    const tagsFilter = useAppSelector(
        (state) => state.store.articles.articleTagFilter,
    );
    const nameFilter = useAppSelector(
        (state) => state.store.articles.filterName,
    );

    useEffect(() => {
        dispatch(setMenuActivePage('articles'));
        dispatch(fetchArticles({ tags: tagsFilter }));
    }, []);

    const filterTagsHandler = (value: string[]) => {
        dispatch(setArticlesTagFilter(value));
        dispatch(fetchArticles({ tags: value }));
    };

    // ========================
    // Основной контент
    // ========================
    return (
        <div className="h-full w-full box-border p-[20px]">
            <div className="h-full box-border">
                {/* Заголовок */}
                <div className="relative flex items-center mb-[20px]">
                    <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
                        Статьи
                    </div>
                    <SecondaryButton
                        onClick={() => navigate('/article/create')}
                        text="Создать статью"
                        className="absolute right-0"
                    />
                </div>

                {/* Фильтры */}
                <Filters
                    onChangeTags={(value: string[]) => {
                        filterTagsHandler(value);
                    }}
                    onChangeName={(value: string) => {
                        dispatch(setArticlesNameFilter(value));
                    }}
                />

                {/* Список статей */}
                <div className="mt-[20px]">
                    {articles.length === 0 ? (
                        <div className="text-liquid-light text-[16px]">
                            Пока нет статей
                        </div>
                    ) : (
                        articles
                            .filter((v) =>
                                v.name
                                    .toLocaleLowerCase()
                                    .includes(nameFilter.toLocaleLowerCase()),
                            )
                            .map((v) => <ArticleItem key={v.id} {...v} />)
                    )}
                </div>
            </div>
        </div>
    );
};

export default Articles;