import { FC, useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
import { cn } from '../../../../lib/cn';
import { ChevroneDown, Edit } from '../../../../assets/icons/groups';
import { fetchArticles } from '../../../../redux/slices/articles';

import { useNavigate } from 'react-router-dom';

export interface ArticleItemProps {
    id: number;
    name: string;
    tags: string[];
}

const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
    const navigate = useNavigate();
    return (
        <div
            className={cn(
                'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
                // type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
                'gap-[20px] px-[20px] py-[10px] box-border ',
                'border-b-[1px] border-b-liquid-lighter cursor-pointer hover:bg-liquid-lighter transition-all duration-300',
            )}
            onClick={() => {
                navigate(`/article/${id}?back=/home/account/articles`);
            }}
        >
            <div className="h-[23px] flex ">
                <div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">
                    #{id}
                </div>
                <div className="text-[18px] font-bold flex items-center">
                    {name}
                </div>
            </div>
            <div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
                {tags.map((v, i) => (
                    <div
                        key={i}
                        className={cn(
                            'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
                            v == 'Sertificated' && 'text-liquid-green',
                        )}
                    >
                        {v}
                    </div>
                ))}
            </div>

            <img
                className=" absolute right-[10px] top-[10px] h-[24px] w-[24px] hover:bg-liquid-light rounded-[5px] transition-all duration-300"
                src={Edit}
                onClick={(e) => {
                    e.stopPropagation();
                    navigate(
                        `/article/create?back=/home/account/articles&articleId=${id}`,
                    );
                }}
            />
        </div>
    );
};

interface ArticlesBlockProps {
    className?: string;
}

const ArticlesBlock: FC<ArticlesBlockProps> = ({ className = '' }) => {
    const dispatch = useAppDispatch();
    const articles = useAppSelector((state) => state.articles.articles);
    const [active, setActive] = useState<boolean>(true);

    useEffect(() => {
        dispatch(setMenuActiveProfilePage('articles'));
        dispatch(fetchArticles({}));
    }, []);
    return (
        <div className="h-full w-full relative p-[20px]">
            <div
                className={cn(
                    ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
                    className,
                )}
            >
                <div
                    className={cn(
                        ' h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300',
                        active && ' border-b-liquid-lighter',
                    )}
                    onClick={() => {
                        setActive(!active);
                    }}
                >
                    <span>Мои статьи</span>
                    <img
                        src={ChevroneDown}
                        className={cn(
                            'transition-all duration-300',
                            active && 'rotate-180',
                        )}
                    />
                </div>
                <div
                    className={cn(
                        ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
                        active && 'grid-rows-[1fr] opacity-100',
                    )}
                >
                    <div className="overflow-hidden">
                        <div className="grid gap-[20px] pt-[20px] pb-[20px] box-border">
                            {articles.map((v, i) => (
                                <ArticleItem key={i} {...v} />
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ArticlesBlock;