import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
import { useAuthContext } from '@/lib/contexts/Auth.context';

export default function SecurityPage() {
    const { user } = useAuthContext();

    if (!user) return;

    const hasGoogle = !!user.google_id;
    const hasPassword = !!user.password;
    const showSetPassword = hasGoogle && !hasPassword;
    return (
        <>
            <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]">
                <div className="flex flex-col gap-[20px] w-[900px] ">
                    {showSetPassword && (
                        <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]">
                            <p className="text-light-violet font-medium">
                                ЗАДАТЬ ПАРОЛЬ
                            </p>
                            <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                                <InputField
                                    placeholder="Введите пароль"
                                    type="password"
                                    name="password"
                                />
                                <InputField
                                    isPassword
                                    placeholder="Повторите пароль"
                                    type="password"
                                    name="repeat_password"
                                />
                            </div>
                            <Button>Сменить</Button>
                            <Separator className="bg-violet/30 h-[1px]" />
                        </div>
                    )}

                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]">
                        <p className="text-light-violet font-medium">
                            СМЕНА ПОЧТЫ
                        </p>
                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                            <InputField
                                placeholder="Почта аккаунта"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Введите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</Button>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />
                    {hasPassword && (
                        <div className="flex flex-col flex-start gap-[20px] w-[310px] ">
                            <p className="text-light-violet font-medium">
                                СМЕНА ПАРОЛЯ
                            </p>
                            <div className="flex flex-col flex-start gap-[10px] w-[310px]">
                                <InputField
                                    placeholder="Текущий пароль"
                                    isPassword
                                    type="password"
                                    name="password"
                                />
                                <InputField
                                    isPassword
                                    placeholder="Введите пароль"
                                    type="password"
                                    name="password"
                                />
                                <InputField
                                    isPassword
                                    placeholder="Повторите пароль"
                                    type="password"
                                    name="password"
                                />
                            </div>
                            <Button>Сменить</Button>
                            <Separator className="bg-violet/30 h-[1px]" />
                        </div>
                    )}
                    <Button className="w-[310px]">Выйти из аккаунта</Button>
                </div>
            </div>
        </>
    );
}