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 { Input } from '../../../components/input/Input';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { createGroup } from '../../../redux/slices/groups';

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

const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
    const [name, setName] = useState<string>('');
    const [description, setDescription] = useState<string>('');
    const status = useAppSelector((state) => state.groups.createGroup.status);
    const dispatch = useAppDispatch();

    useEffect(() => {
        if (status == 'successful') {
            setActive(false);
        }
    }, [status]);

    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>
                <Input
                    name="name"
                    autocomplete="name"
                    className="mt-[10px]"
                    type="text"
                    label="Название"
                    onChange={(v) => {
                        setName(v);
                    }}
                    placeholder="login"
                />
                <Input
                    name="description"
                    autocomplete="description"
                    className="mt-[10px]"
                    type="text"
                    label="Описание"
                    onChange={(v) => {
                        setDescription(v);
                    }}
                    placeholder="login"
                />

                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
                    <PrimaryButton
                        onClick={() => {
                            dispatch(createGroup({ name, description }));
                        }}
                        text="Создать"
                        disabled={status == 'loading'}
                    />
                    <SecondaryButton
                        onClick={() => {
                            setActive(false);
                        }}
                        text="Отмена"
                    />
                </div>
            </div>
        </Modal>
    );
};

export default ModalCreate;