import { FC, useEffect, useState } from 'react';
import { Modal } from '../../../../components/modal/Modal';
import { PrimaryButton } from '../../../../components/button/PrimaryButton';
import { SecondaryButton } from '../../../../components/button/SecondaryButton';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
import MarkdownEditor, { MarkDownPattern } from '../../../articleeditor/Editor';
import {
    deletePost,
    fetchPostById,
    setGroupFeedStatus,
    updatePost,
} from '../../../../redux/slices/groupfeed';
import { ReverseButton } from '../../../../components/button/ReverseButton';
import { cn } from '../../../../lib/cn';

interface ModalUpdateProps {
    groupId: number;
    postId: number;
    active: boolean;
    setActive: (value: boolean) => void;
}

const ModalUpdate: FC<ModalUpdateProps> = ({
    active,
    setActive,
    groupId,
    postId,
}) => {
    // const [name, setName] = useState<string>('');
    const [content, setContent] = useState<string>('');
    const status = useAppSelector((state) => state.groupfeed.updatePost.status);
    const statusDelete = useAppSelector(
        (state) => state.groupfeed.deletePost.status,
    );
    const { post, status: statusPost } = useAppSelector(
        (state) => state.groupfeed.fetchPostById,
    );
    const dispatch = useAppDispatch();

    useEffect(() => {
        if (status == 'successful') {
            setActive(false);
            dispatch(setGroupFeedStatus({ key: 'updatePost', status: 'idle' }));
        }
    }, [status]);

    useEffect(() => {
        if (statusDelete == 'successful') {
            setActive(false);
            dispatch(setGroupFeedStatus({ key: 'deletePost', status: 'idle' }));
        }
    }, [statusDelete]);

    useEffect(() => {
        if (postId) dispatch(fetchPostById({ groupId, postId }));
    }, [postId]);

    return (
        <Modal
            className="bg-liquid-background h-[calc(100vh-30%)] border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white overflow-hidden"
            onOpenChange={setActive}
            open={active}
            backdrop="blur"
        >
            <div className="max-w-[1400px] h-full overflow-hidden transition-all duratoin-300">
                <div className="font-bold text-[30px]">
                    Обновить пост #{post?.id}
                </div>
                <div
                    className={cn(
                        ' absolute z-10 h-[calc(100%-100px)] w-[calc(100%-50px)] flex items-center justify-center text-transparent transition-all pointer-events-none ',
                        statusPost == 'loading' && 'text-liquid-white',
                    )}
                >
                    <div>Загрузка...</div>
                </div>
                <div
                    className={cn(
                        'h-[calc(100%-45px-60px)] opacity-50 pointer-events-none transition-all ',
                        statusPost == 'successful' &&
                            'text-liquid-white pointer-events-auto opacity-100',
                    )}
                >
                    <MarkdownEditor
                        defaultValue={
                            statusPost == 'successful'
                                ? post?.content
                                : MarkDownPattern
                        }
                        onChange={(v) => {
                            setContent(v);
                        }}
                    />
                </div>
                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                    <PrimaryButton
                        onClick={() => {
                            dispatch(
                                updatePost({
                                    name: '',
                                    content,
                                    groupId,
                                    postId,
                                }),
                            );
                        }}
                        text={status == 'idle' ? 'Сохранить' : 'Загрузка...'}
                        disabled={
                            status == 'loading' || statusPost != 'successful'
                        }
                    />
                    <ReverseButton
                        onClick={() => {
                            dispatch(deletePost({ groupId, postId }));
                        }}
                        color="error"
                        text={
                            statusDelete == 'idle' ? 'Удалить' : 'Загрузка...'
                        }
                        disabled={
                            statusDelete == 'loading' ||
                            statusPost != 'successful'
                        }
                    />
                    <SecondaryButton
                        onClick={() => {
                            setActive(false);
                        }}
                        text="Отмена"
                    />
                </div>
            </div>
        </Modal>
    );
};

export default ModalUpdate;