'use client';

import { SubmitHandler } from 'react-hook-form';
import { Password, Button, Input } from 'rizzui';
import { useMedia } from '../../hooks/use-media';
import { Form } from '../../components/ui/form';
import { loginSchema, LoginSchema } from '../validators/login.schema';
import { useRouter } from 'next/navigation';

const initialValues: LoginSchema = {
  email: '',
  password: '',
  rememberMe: true,
};

export default function SignInForm() {
  const isMedium = useMedia('(max-width: 1200px)', false);
  const router = useRouter();
  const onSubmit: SubmitHandler<LoginSchema> = (data) => {
    console.log(data);
  };

  return (
    <>
      <Form<LoginSchema>
        validationSchema={loginSchema}
        onSubmit={onSubmit}
        useFormProps={{
          mode: 'onChange',
          defaultValues: initialValues,
        }}
      >
        {({ register, formState: { errors } }) => (
          <div className="space-y-5 lg:space-y-6">
            <Input
              type="email"
              size={isMedium ? 'sm' : 'md'}
              label="Email"
              placeholder="Enter your email"
              className="[&>label>span]:font-medium text-black"
              inputClassName="bg-white/50 text-black placeholder:text-black/60 border-white/20"
              {...register('email')}
              error={errors.email?.message}
            />
            <Password
              label="Password"
              placeholder="Enter your password"
              size={isMedium ? 'sm' : 'md'}
              className="[&>label>span]:font-medium text-black"
              inputClassName="bg-white/50 text-black placeholder:text-black/60 border-white/20"
              {...register('password')}
              error={errors.password?.message}
            />

            <Button
              className="w-full"
              type="submit"
              onClick={() => router.push('/dashboard')}
              size={isMedium ? 'sm' : 'md'}
            >
              Sign In
            </Button>
          </div>
        )}
      </Form>
    </>
  );
}