"use client";

import SiteBreadcrumb from "@/components/site-breadcrumb";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import {
  getUserById,
  saveUserInternal,
} from "@/service/management-user/management-user";
import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Link, useRouter } from "@/i18n/routing";

import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { close, error, loading } from "@/config/swal";
import { useParams } from "next/navigation";
import { identity } from "@fullcalendar/core/internal";

const FormSchema = z.object({
  fullname: z.string({
    required_error: "Required",
  }),
  username: z.string({
    required_error: "Required",
  }),

  identity: z.string({
    required_error: "Required",
  }),
  address: z.string({
    required_error: "Required",
  }),
  email: z.string({
    required_error: "Required",
  }),
  phoneNumber: z.string({
    required_error: "Required",
  }),
  password: z.string({
    required_error: "Required",
  }),
  confirmPassword: z.string({
    required_error: "Required",
  }),
  isValidPassword: z.boolean().refine((val) => val === true, {
    message: "Check Password",
  }),
});

export default function EditUserForm() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id;
  const MySwal = withReactContent(Swal);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      password: "",
      confirmPassword: "",
    },
  });

  const passwordVal = form.watch("password");
  const confPasswordVal = form.watch("confirmPassword");

  useEffect(() => {
    initData();
  }, []);

  const initData = async () => {
    loading();
    const response = await getUserById(String(id));
    const res = response?.data?.data;
    close();
    console.log("res", res);
    form.setValue("fullname", res?.fullname);
    form.setValue("username", res?.username);
    form.setValue("phoneNumber", res?.phoneNumber);
    form.setValue("address", res?.address);
    form.setValue("email", res?.email);
  };

  async function save(data: z.infer<typeof FormSchema>) {
    let req: any = {
      id: Number(id),
      firstName: data.fullname,
      username: data.username,
      address: data.address,
      email: data.email,
      identityNumber: data.identity,
      password: data.password,
      passwordConf: data.confirmPassword,
      isDefault: false,
    };

    loading();
    const response = await saveUserInternal(req);

    if (response?.error) {
      error(response.message);
      return false;
    }

    close();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Oke",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/admin/management-user");
      }
    });
    return false;
  }

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    MySwal.fire({
      title: "Simpan Data?",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  }

  return (
    <div>
      <SiteBreadcrumb />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-6 bg-white p-10 w-full"
        >
          <p className="text-xl">Data Pengelola Media Hub</p>

          <FormField
            control={form.control}
            name="fullname"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nama Lengkap</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan nama lengkap"
                    {...field}
                    className="w-1/2"
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan username"
                    {...field}
                    className="w-1/2"
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="identity"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nomor Identitas</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan nomor identitas"
                    {...field}
                    className="w-1/2"
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Alamat</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="Masukkan alamat"
                    className="resize-none w-1/2"
                    {...field}
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    type="email"
                    placeholder="Masukkan email"
                    {...field}
                    className="w-1/2"
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="phoneNumber"
            render={({ field }) => (
              <FormItem>
                <FormLabel>No. Handphone</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan nomor handphone"
                    {...field}
                    className="w-1/2 mb-5"
                    readOnly
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <Link href="/admin/management-user">
            <Button type="button" color="primary" variant="outline">
              Back
            </Button>
          </Link>
        </form>
      </Form>
    </div>
  );
}
