import PageContent from "~/modules/page-content";
import Form from "./components/Form";
import RegistrasiIndividu from "./components/RegistrasiIndividu";
import RegistrasiBisnis from "./components/RegistrasiBisnis";
import FormBisnis from "./components/FormBisnis";
import Link from "next/link";
import Image from "next/image";
import IndoteknikLogo from "~/images/logo.png";
import AccountActivation from "../account-activation";
import { useState } from "react";

const LOGO_WIDTH = 150;
const LOGO_HEIGHT = LOGO_WIDTH / 3;

const Register = () => {
  const [isIndividuClicked, setIsIndividuClicked] = useState(true);
  const [isBisnisClicked, setIsBisnisClicked] = useState(false);

  const handleIndividuClick = () => {
    setIsIndividuClicked(true);
    setIsBisnisClicked(false);
  };

  const handleBisnisClick = () => {
    setIsIndividuClicked(false);
    setIsBisnisClicked(true);
  };

  return (
    <div className="container">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16">
        <section className="border">
          <div className="px-8 py-4">
            <Link href="/" className="block md:hidden">
              <Image
                src={IndoteknikLogo}
                alt="Logo Indoteknik"
                width={LOGO_WIDTH}
                height={LOGO_HEIGHT}
                className="mx-auto mb-4 w-auto h-auto"
                priority
              />
            </Link>

            <h1 className="text-2xl font-semibold text-center md:text-left">
              Daftar Akun Indoteknik
            </h1>
            <h2 className="text-gray_r-11 mt-1 mb-4 text-center md:text-left">
              Buat akun sekarang lebih mudah dan terverifikasi
            </h2>

            <label htmlFor="name" className="text-black font-bold">
              Tipe Akun
            </label>
            <div className="grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer">
              <div
                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
                  isIndividuClicked ? "bg-red-500 text-white" : ""
                }`}
                onClick={handleIndividuClick}
              >
                <p>Individu</p>
              </div>
              <div
                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
                  isBisnisClicked ? "bg-red-500 text-white" : ""
                }`}
                onClick={handleBisnisClick}
              >
                <p>Bisnis</p>
              </div>
            </div>
            <div className="transition-opacity duration-300 ease-in-out">
              {isIndividuClicked && (
                <div className="opacity-100">
                  <RegistrasiIndividu />
                </div>
              )}
              {isBisnisClicked && (
                <div className="opacity-100">
                  <RegistrasiBisnis />
                </div>
              )}
            </div>
            <section className="flex justify-center items-center flex-col">
              <div className="text-gray_r-11 mt-4 text-center md:text-left">
                Sudah punya akun Indoteknik?{" "}
                <Link href="/login" className="inline font-medium text-danger-500">
                  Masuk
                </Link>
              </div>
              <div className="text-gray_r-11 mt-4 text-center md:text-left">
                Akun anda belum aktif?{" "}
                <Link href="/register?activation=email" className="inline font-medium text-danger-500">
                  Aktivasi
                </Link>
              </div>
            </section>
          </div>
        </section>

        <section className="my-10 md:my-0">
          <PageContent path="/register" />
        </section>
      </div>

      <AccountActivation />
    </div>
  );
};

export default Register;