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 {
    removeGroupMember,
    setGroupsStatus,
} from '../../../../redux/slices/groups';
import ConfirmModal from '../../../../components/modal/ConfirmModal';
import { useNavigate } from 'react-router-dom';

interface ModalLeaveProps {
    active: boolean;
    setActive: (value: boolean) => void;
    groupId: number;
    groupName?: string;
    userId: number;
}

const ModalLeave: FC<ModalLeaveProps> = ({
    active,
    setActive,
    groupName,
    groupId,
    userId,
}) => {
    const statusLeave = useAppSelector(
        (state) => state.groups.removeGroupMember.status,
    );
    const dispatch = useAppDispatch();
    const navigate = useNavigate();

    const [modalConfirmActive, setModalConfirmActive] =
        useState<boolean>(false);

    useEffect(() => {
        if (statusLeave == 'successful') {
            dispatch(
                setGroupsStatus({ key: 'removeGroupMember', status: 'idle' }),
            );
            setActive(false);
            navigate('/home/groups');
        }
    }, [statusLeave]);

    return (
        <>
            <Modal
                className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
                onOpenChange={setActive}
                open={active}
                backdrop="blur"
            >
                <div className="w-[500px]">
                    <div className="font-bold text-[30px]">
                        Вы действительно хотите покинуть группу:
                    </div>
                    <div className="font-bold text-[20px] mt-[20px]">
                        "{groupName}" #{groupId}?
                    </div>
                    <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                        <PrimaryButton
                            onClick={() => {
                                setModalConfirmActive(true);
                            }}
                            text={
                                statusLeave == 'loading'
                                    ? 'Покинуть...'
                                    : 'Покинуть'
                            }
                            disabled={statusLeave == 'loading'}
                            color="error"
                        />
                        <SecondaryButton
                            onClick={() => {
                                setActive(false);
                            }}
                            text="Отмена"
                        />
                    </div>
                </div>
                <ConfirmModal
                    active={modalConfirmActive}
                    setActive={setModalConfirmActive}
                    title="Подтвердите действия"
                    message="Вы действительно хотите покинуть группу?"
                    confirmColor="error"
                    confirmText="Покинуть"
                    onConfirmClick={() => {
                        dispatch(
                            removeGroupMember({
                                groupId,
                                memberId: userId,
                            }),
                        );
                    }}
                />
            </Modal>
        </>
    );
};

export default ModalLeave;