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 from '../../../articleeditor/Editor';
import {
    createPost,
    setGroupFeedStatus,
} from '../../../../redux/slices/groupfeed';

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

const ModalCreate: FC<ModalCreateProps> = ({ active, setActive, groupId }) => {
    // const [name, setName] = useState<string>('');
    const [content, setContent] = useState<string>('');
    const status = useAppSelector((state) => state.groupfeed.createPost.status);
    const dispatch = useAppDispatch();

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

    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">
                <div className="font-bold text-[30px]">Создать пост</div>

                <div className="h-[calc(100%-45px-60px)]">
                    <MarkdownEditor
                        onChange={(v) => {
                            setContent(v);
                        }}
                    />
                </div>
                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                    <PrimaryButton
                        onClick={() => {
                            dispatch(
                                createPost({ name: '', content, groupId }),
                            );
                        }}
                        text={status == 'idle' ? 'Опубликовать' : 'Загрузка...'}
                        disabled={status == 'loading'}
                    />
                    <SecondaryButton
                        onClick={() => {
                            setActive(false);
                        }}
                        text="Отмена"
                    />
                </div>
            </div>
        </Modal>
    );
};

export default ModalCreate;