"use client";
import { Button, Card, Label, TextInput } from "flowbite-react";
import { signIn } from "next-auth/react";
import Link from "next/link";
import type { FC } from "react";
import { SyntheticEvent, useState } from "react";

type props = {
  searchParams?: Record<"callbackUrl" | "error", string>;
};

const SignInPage: FC = function (props: props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const submit = async (e: SyntheticEvent) => {
    e.preventDefault();

    const login = await signIn("credentials", {
      email,
      password,
      redirect: true,
      callbackUrl: "/dashboard",
    })
      .then((error: any) => {
        "then", error;
      })
      .catch((error: any) => {
        "catch", error;
      });
  };

  return (
    <div className="flex flex-col items-center justify-center px-6 lg:h-screen lg:gap-y-12">
      <Link href="/" className="my-6 flex items-center gap-x-1 lg:my-0">
        <img alt="logo" src="/static/images/logo.png" className="mr-3 h-10" />
      </Link>
      <Card
        horizontal
        imgSrc="/static/images/authentication/login.jpg"
        imgAlt=""
        className="w-full md:max-w-[1024px] md:[&>*]:w-full md:[&>*]:p-16 [&>img]:hidden md:[&>img]:w-96 md:[&>img]:p-0 lg:[&>img]:block"
      >
        {props?.searchParams?.error && (
          <p className="text-red-500">User name or password not match!</p>
        )}
        <h1 className="mb-3 text-2xl font-bold text-blue-500 dark:text-white md:text-3xl">
          Sign in to platform
        </h1>
        <form onSubmit={submit}>
          <div className="mb-4 flex flex-col gap-y-3">
            <Label htmlFor="email">Your email</Label>
            <TextInput
              id="email"
              name="email"
              placeholder="name@company.com"
              type="email"
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="mb-6 flex flex-col gap-y-3">
            <Label htmlFor="password">Your password</Label>
            <TextInput
              id="password"
              name="password"
              placeholder="••••••••"
              type="password"
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <div className="mb-6 flex items-center justify-between">
            <Link
              href="/forgot-password"
              className="w-1/2 text-right text-sm text-primary-600 dark:text-primary-300"
            >
              Lost Password?
            </Link>
          </div>
          <div className="mb-6">
            <Button type="submit" className="w-full lg:w-auto">
              Login to your account
            </Button>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-300">
            Not registered?&nbsp;
            <Link
              href="/sign-up"
              className="text-primary-600 dark:text-primary-300"
            >
              Create account
            </Link>
          </p>
        </form>
      </Card>
    </div>
  );
};

export default SignInPage;