Untitled

'use client';

import { Button } from '@/components/shadcnUi/button';
import { Input } from '@/components/shadcnUi/input';
import { Spinner } from '@/core/ui/zenlots/src/components';
import { toast } from '@/hooks/use-toast';
import { loginSchema, LoginSchemaType } from '@/modules/auth/authTypes';
import { useFormik } from 'formik';
import { signIn } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { X } from 'phosphor-react';

import { useState } from 'react';
import { ZodError } from 'zod';

export default function LoginForm() {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();

  const validateForm = (values: LoginSchemaType) => {
    try {
      loginSchema.parse(values);
    } catch (error) {
      if (error instanceof ZodError) {
        return error.formErrors.fieldErrors;
      }
    }
  };

  const onSubmit = async (values: LoginSchemaType) => {
    setIsLoading(true);

    await signIn('credentials', {
      email: values.email,
      password: values.password,
      redirect: false,
      callbackUrl: '/music', // Use the extracted callback URL
    })
      .then(async (response: any) => {
        if (response?.error) {
          toast({
            title: 'Authorization Error',
            description: 'Please check your credentials before login',
          });
        } else {
          // await session.update();
          router.replace('/'); // Redirect to the callback URL
        }
      })
      .catch((errorResponse) => {});
    setIsLoading(false);
  };

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      email: '',
      password: '',
    },
    validateOnChange: true,
    onSubmit,
    validate: validateForm,
  });

  return (
    <div className="mx-auto flex h-min max-w-3xl flex-col gap-8 border border-white/20 bg-black/75 p-4 shadow-xl backdrop-blur-lg">
      <div className="flex items-center justify-between">
        <p>Login into your account</p>
        <X size={24} className="text-grayText/50" />
      </div>
      <div className="flex items-end justify-between">
        <div className="hidden -rotate-12 pb-4 pl-4 text-start font-scratchy text-8xl text-transparent text-yellow-400 lg:block">
          Never Abandon <br /> Imagination
        </div>
        <form
          className="flex flex-col items-end gap-4"
          onSubmit={(e) => {
            e.preventDefault();
            formik.handleSubmit(e);
          }}
        >
          <div className="min-w-96">
            <Button
              variant="default"
              className="flex w-full justify-between gap-4"
              size={'lg'}
            >
              <div className="relative h-6 w-6">
                <Image
                  src="/image/google-icon.png"
                  alt="Login Image"
                  sizes="(max-width: 768px) 100vw, 33vw"
                  fill
                  objectFit="cover"
                />
              </div>
              <p className="font-satosh flex-1 text-base">
                Continue with Google
              </p>
            </Button>
          </div>
          <div className="flex w-full items-center gap-2">
            <span className="flex-1 border-t border-border"></span>
            <span className="text-base text-grayText">OR LOGIN WITH EMAIL</span>
            <span className="flex-1 border-t border-border"></span>
          </div>

          <Input
            placeholder="Email Address"
            error={formik.touched.email ? formik.errors.email : undefined}
            {...formik.getFieldProps('email')}
          />
          <Input
            placeholder="Password"
            type="password"
            error={formik.touched.password ? formik.errors.password : undefined}
            {...formik.getFieldProps('password')}
          />
          <Button
            type="button"
            variant="link"
            className="h-6 !py-0 !pr-0 text-grayText"
          >
            Forgot Password?
          </Button>
          <Button
            type="submit"
            variant="default"
            className="flex w-full gap-4"
            size={'lg'}
          >
            {isLoading ? <Spinner /> : <>Login</>}
          </Button>
          <div className="flex w-full items-start justify-center">
            <span className="text-grayText">{`Don't have an account?`}</span>
            <Link
              href={'/register'}
              className="h-6 !py-0 !pl-2 !pr-0 text-white"
            >
              Sign Up
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
}