mediahub-fe/components/form/communication/escalation-detail-form.tsx

"use client";
"use client";
import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { useParams } from "next/navigation";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import {
  getEscalationDiscussion,
  getTicketingDetail,
  getTicketingInternalDetail,
  getTicketingInternalDiscussion,
  saveTicketInternalReply,
} from "@/service/communication/communication";
import { Textarea } from "@/components/ui/textarea";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Link } from "@/i18n/routing";
import { loading } from "@/lib/swal";
import { id } from "date-fns/locale";

const taskSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  naration: z.string().min(2, {
    message: "Narasi Penugasan harus lebih dari 2 karakter.",
  }),
});

export type replyDetail = {
  id: number;
  message: string;
  createdAt: string;
  messageFrom: {
    id: number;
    fullname: string;
  };
  messageTo: {
    id: number;
    fullname: string;
  };
};

export default function FormDetailEscalation() {
  const MySwal = withReactContent(Swal);
  const { id } = useParams() as { id: string };

  const [detail, setDetail] = useState<any>();
  const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
  const [replyVisible, setReplyVisible] = useState(false);
  const [listDiscussion, setListDiscussion] = useState();
  const [message, setMessage] = useState("");
  const [selectedPriority, setSelectedPriority] = useState("");
  const [replyMessage, setReplyMessage] = useState("");
  const [replies, setReplies] = useState([
    {
      id: 1,
      name: "Mabes Polri - Approver",
      message: "test",
      timestamp: "2024-12-20 00:56:10",
    },
    {
      id: 2,
      name: "Mabes Polri - Approver",
      message: "balas",
      timestamp: "2025-01-18 17:42:48",
    },
  ]);

  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(taskSchema),
  });

  useEffect(() => {
    async function initState() {
      if (id) {
        const response = await getTicketingDetail(id);
        setDetail(response?.data?.data);
      }
    }
    initState();
    getTicketReply();
  }, [id]);

  async function getTicketReply() {
    const res = await getTicketingInternalDiscussion(id);
    if (res?.data !== null) {
      setTicketReply(res?.data?.data);
    }
  }

  const handleReply = () => {
    setReplyVisible((prev) => !prev); // Toggle visibility
  };
  // useEffect(() => {
  //   async function initState() {
  //     if (id != undefined) {
  //       loading();
  //       const responseGet = await getEscalationDiscussion(id);
  //       close();

  //       console.log("escal data", responseGet?.data);
  //       setListDiscussion(responseGet?.data?.data);
  //     }
  //   }
  //   initState();
  // }, [id]);

  const handleSendReply = () => {
    if (replyMessage.trim() === "") return;

    const newReply = {
      id: replies.length + 1,
      name: "Mabes Polri - Approver", // Sesuaikan dengan data dinamis jika ada
      message: replyMessage,
      timestamp: new Date().toISOString().slice(0, 19).replace("T", " "),
    };

    setReplies([...replies, newReply]);
    setReplyMessage("");
  };

  return (
    <div>
      <div className="flex">
        <div className="flex flex-col mt-6 w-full mb-3">
          {detail !== undefined && (
            <div key={detail?.id} className="bg-slate-300  rounded-md">
              <p className="p-5 bg-slate-300 rounded-md text-lg font-semibold">
                Ticket #{detail.id}
              </p>
              <div className="flex flex-row gap-3 bg-sky-100 p-5 items-center">
                <Icon icon="qlementine-icons:user-16" width={36} />

                <div>
                  <p>
                    <span className="font-bold">
                      {detail?.commentFromUserName}
                    </span>
                    {` `}
                    mengirimkan pesan untuk{` `}
                    <Link
                      href={
                        detail?.feed
                          ? detail?.feed?.permalink_url == undefined
                            ? detail?.feedUrl
                            : detail?.feed?.permalink_url
                          : ""
                      }
                      target="_blank"
                      className="font-bold"
                    >
                      {detail?.message}
                    </Link>
                  </p>
                  <p className="text-xs">
                    {`${new Date(detail?.createdAt).getDate()}-${
                      new Date(detail?.createdAt).getMonth() + 1
                    }-${new Date(detail?.createdAt).getFullYear()} ${new Date(
                      detail?.createdAt
                    ).getHours()}:${new Date(detail?.createdAt).getMinutes()}`}
                  </p>
                </div>
              </div>
              <p className="p-5 bg-white">{detail.message}</p>
            </div>
          )}
        </div>
      </div>
      {detail !== undefined && (
        <div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white">
          <div className="space-y-2 px-3 mt-3">
            <Label>Judul</Label>
            <Controller
              control={control}
              name="title"
              render={({ field }) => (
                <Input
                  size="md"
                  type="text"
                  value={detail?.title}
                  onChange={field.onChange}
                  placeholder="Enter Title"
                />
              )}
            />
            {/* {errors.title?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.title.message}
                  </p>
                )} */}
          </div>
          <div className="mt-5 px-3">
            <Label>Prioritas</Label>
            <Select
              onValueChange={setSelectedPriority}
              value={detail?.priority?.name}
            >
              <SelectTrigger size="md" className="w-3/12">
                <SelectValue placeholder="Pilih" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Low">Low</SelectItem>
                <SelectItem value="Medium">Medium</SelectItem>
                <SelectItem value="High">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2 px-3 mt-3">
            <Label>Description</Label>
            <Controller
              control={control}
              name="title"
              render={({ field }) => (
                <Textarea
                  value={detail?.description}
                  onChange={field.onChange}
                  placeholder="Enter Title"
                />
              )}
            />
            {/* {errors.title?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.title.message}
                  </p>
                )} */}
          </div>
          <div className="mx-3 my-3">
            <h3 className="text-gray-700 font-medium">Tanggapan</h3>
            <div className="space-y-4">
              {replies.map((reply) => (
                <div key={reply.id} className="border-b pb-2">
                  <p className="font-semibold text-gray-800">{reply.name}</p>
                  <p className="text-gray-600">{reply.message}</p>
                  <p className="text-sm text-gray-400">{reply.timestamp}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="mx-3">
            <label
              htmlFor="replyMessage"
              className="block text-gray-700 font-medium mb-2"
            >
              Tulis Tanggapan Anda
            </label>
            <textarea
              id="replyMessage"
              className="w-full h-24 border border-gray-300 rounded-md p-2"
              value={replyMessage}
              onChange={(e) => setReplyMessage(e.target.value)}
              placeholder="Tulis tanggapan anda di sini..."
            />
            <div className="flex justify-end gap-3 mt-2 mb-3">
              <button
                onClick={() => setReplyMessage("")}
                className="px-4 py-2 bg-gray-200 text-gray-800 rounded-md"
              >
                Batal
              </button>
              <button
                onClick={handleSendReply}
                className="px-4 py-2 bg-blue-600 text-white rounded-md"
              >
                Kirim Pesan
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}