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 {
    addGroupMember,
    fetchGroupById,
    GroupMember,
    removeGroupMember,
    setGroupsStatus,
} from '../../../../redux/slices/groups';
import ConfirmModal from '../../../../components/modal/ConfirmModal';
import {
    DropDownList,
    DropDownListItem,
} from '../../../../components/input/DropDownList';
import { ReverseButton } from '../../../../components/button/ReverseButton';

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

const ModalUpdate: FC<ModalUpdateProps> = ({
    active,
    setActive,
    groupId,
    user,
    adminUser,
    groupName,
}) => {
    const statusLeave = useAppSelector(
        (state) => state.groups.removeGroupMember.status,
    );
    const statusUpdate = useAppSelector(
        (state) => state.groups.addGroupMember.status,
    );
    const dispatch = useAppDispatch();

    const [modalConfirmDeleteUser, setModalConfirmDeleteUser] =
        useState<boolean>(false);
    const [modalConfirmRoleActive, setModalConfirmRoleActive] =
        useState<boolean>(false);
    const [userRole, setUserRole] = useState<string>('');

    useEffect(() => {
        if (active) {
        }
    }, [active]);

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

    useEffect(() => {
        if (statusUpdate == 'successful') {
            dispatch(
                setGroupsStatus({ key: 'addGroupMember', status: 'idle' }),
            );
            dispatch(fetchGroupById(groupId));
            setActive(false);
        }
    }, [statusUpdate]);

    useEffect(() => {
        if (user) {
            setUserRole(
                user?.role.includes('Creator') ? 'Creator' : user?.role,
            );
        }
    }, [user]);

    const roles: DropDownListItem[] = [
        { value: 'Member', text: 'Участник' },
        { value: 'Administrator', text: 'Администратор' },
    ];
    if (adminUser?.role.includes('Creator')) {
        roles.push({ value: 'Creator', text: 'Владелец' });
    }

    const casrtRoleMap: Record<'Member' | 'Administrator' | 'Creator', string> =
        {
            Member: 'Участник',
            Administrator: 'Администратор',
            Creator: 'Владелец',
        };

    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]">
                    "{groupName}" #{groupId}
                </div>
                <div className="my-[5px]">Пользователь: {user?.username}</div>
                <div>
                    Текущая роль:{' '}
                    {casrtRoleMap[user?.role as keyof typeof casrtRoleMap]}
                </div>
                <div className="flex flex-row w-full items-center justify-between mt-[20px] gap-[20px]">
                    <div>
                        <DropDownList
                            defaultState={{
                                value: userRole,
                                text: casrtRoleMap[
                                    userRole as keyof typeof casrtRoleMap
                                ],
                            }}
                            weight="w-[230px]"
                            items={roles}
                            onChange={(v) => {
                                setUserRole(v);
                            }}
                        />
                    </div>
                    <PrimaryButton
                        onClick={() => {
                            setModalConfirmRoleActive(true);
                        }}
                        text={
                            statusUpdate == 'loading'
                                ? 'Назначить...'
                                : 'Назначить'
                        }
                        disabled={statusUpdate == 'loading'}
                        color="secondary"
                    />
                </div>

                <div className="flex flex-row w-full items-center justify-between mt-[20px] gap-[20px]">
                    <div className="font-bold text-[24px]">
                        Исключить пользователя?
                    </div>
                    <ReverseButton
                        onClick={() => {
                            setModalConfirmDeleteUser(true);
                        }}
                        text={
                            statusLeave == 'loading'
                                ? 'Исключить...'
                                : 'Исключить'
                        }
                        disabled={statusLeave == 'loading'}
                        color="error"
                    />
                </div>

                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                    <SecondaryButton
                        onClick={() => {
                            setActive(false);
                        }}
                        text="Отмена"
                    />
                </div>
            </div>

            <ConfirmModal
                className=" fixed top-0 left-0"
                active={modalConfirmDeleteUser}
                setActive={setModalConfirmDeleteUser}
                title="Подтвердите действия"
                message={`Вы действительно хотите исключить пользователя ${user?.username}?`}
                confirmColor="error"
                confirmText="Исключить"
                onConfirmClick={() => {
                    if (user) {
                        dispatch(
                            removeGroupMember({
                                groupId,
                                memberId: user.userId,
                            }),
                        );
                    }
                }}
            />

            <ConfirmModal
                className=" fixed top-0 left-0"
                active={modalConfirmRoleActive}
                setActive={setModalConfirmRoleActive}
                title="Подтвердите действия"
                message={`Вы действительно хотите назначить пользователя ${user?.username} в качестве ${userRole}?`}
                confirmText="Назначить"
                onConfirmClick={() => {
                    if (user) {
                        dispatch(
                            addGroupMember({
                                groupId,
                                userId: user.userId,
                                role:
                                    userRole == 'Creator'
                                        ? 'Administrator, Creator'
                                        : userRole,
                            }),
                        );
                    }
                }}
            />
        </Modal>
    );
};

export default ModalUpdate;