TEDI-DDP-FE/src/components/page/patient/MainPagePatient/MainPagePatient.tsx

"use client";

import CustomButton from "@/components/customs/custom-button";
import CustomDialog from "@/components/customs/custom-dialog";
import CustomPopup from "@/components/customs/custom-popup";
import DataWrapper from "@/components/customs/DataWrapper";
import Search from "@/components/customs/custom-search";
import Table from "@/components/customs/custom-table";
import { QUERY_KEY } from "@/constant/config/enum";
import { httpRequest } from "@/services";
import patientServices, {
  PatientItem,
  PatientResponse,
} from "@/services/patientServices";
import { useQuery } from "@tanstack/react-query";
import { Pencil, Trash2, Users } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useMemo, useState } from "react";
import PopupCreatePatient from "../PopupCreatePatient";
import PopupUpdatePatient from "../PopupUpdatePatient";

const MainPagePatient = () => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
  const [deleteItemId, setDeleteItemId] = useState<string>("");

  const _page = searchParams.get("_page");
  const _pageSize = searchParams.get("_pageSize");
  const _keyword = searchParams.get("_keyword");

  /**
   * PARAMS
   */
  const createParam = searchParams.get("_create");
  const updateParam = searchParams.get("_update");

  /**
   * OPEN POPUP
   */
  const openCreatePopup = createParam !== null;
  const openUpdatePopup = !!updateParam;

  /**
   * QUERY LIST PATIENT
   */
  const patientQuery = useQuery<PatientResponse>({
    queryKey: [QUERY_KEY.table_list_patient, _page, _pageSize, _keyword],

    queryFn: async () => {
      const res = await httpRequest<PatientResponse>({
        showMessageFailed: true,

        http: patientServices.getPatient({
          Page: Number(_page || 1),
          PageSize: Number(_pageSize || 10),
          Search: _keyword || "",
          SortBy: "id",
          Desc: true,
        }),
      });

      return (
        res || {
          items: [],
          page: 1,
          pageSize: 10,
          total: 0,
          totalPages: 0,
        }
      );
    },
  });

  /**
   * UPDATE QUERY PARAMS
   */
  const updateQuery = (key: string, value?: string | number) => {
    const params = new URLSearchParams(searchParams.toString());

    if (!value || value === "") {
      params.delete(key);
    } else {
      params.set(key, String(value));
    }

    const queryString = params.toString();

    router.push(queryString ? `${pathname}?${queryString}` : pathname);
  };

  /**
   * OPEN CREATE
   */
  const handleOpenCreate = () => {
    const params = new URLSearchParams(searchParams.toString());

    params.set("_create", "");

    router.push(`${pathname}?${params.toString()}`);
  };

  /**
   * OPEN UPDATE
   */
  const handleOpenUpdate = (id: string) => {
    const params = new URLSearchParams(searchParams.toString());

    params.delete("_create");
    params.set("_update", id);

    router.push(`${pathname}?${params.toString()}`);
  };

  /**
   * CLOSE ALL POPUP
   */
  const handleClosePopup = () => {
    const params = new URLSearchParams(searchParams.toString());

    params.delete("_create");
    params.delete("_update");

    const queryString = params.toString();

    router.push(queryString ? `${pathname}?${queryString}` : pathname);

    setOpenDeleteDialog(false);
    setDeleteItemId("");
  };

  /**
   * DELETE
   */
  const handleOpenDelete = (id: string) => {
    setDeleteItemId(id);
    setOpenDeleteDialog(true);
  };

  /**
   * DATA
   */
  const patientData = useMemo(() => {
    return patientQuery.data?.items || [];
  }, [patientQuery.data]);

  return (
    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
      {/* HEADER */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-black">Bệnh nhân</h2>

        <CustomButton
          variant="midnightBlue"
          fullWidth={false}
          icon={<Users />}
          onClick={handleOpenCreate}
        >
          Tạo mới
        </CustomButton>
      </div>

      {/* SEARCH */}
      <div className="flex items-center justify-between gap-4">
        <div className="w-full md:min-w-[400px]">
          <Search
            keyword={_keyword ?? ""}
            setKeyword={(value) => updateQuery("_keyword", value)}
            placeholder="Tìm kiếm theo tên người dùng, ID"
          />
        </div>
      </div>

      {/* TABLE */}
      <DataWrapper
        data={patientData}
        loading={patientQuery.isLoading}
        title="No New Requests"
        note="Please check back later or view your schedule"
      >
        <Table
          rowKey={(item) => item.id}
          data={patientData}
          column={[
            {
              fixedLeft: true,
              title: "TÊN BỆNH NHÂN",

              render: (item: PatientItem) => (
                <Link
                  href={`/patient/${item.id}`}
                  className="text-blue-500 hover:underline"
                >
                  {item.fullName}
                </Link>
              ),
            },

            {
              title: "MÃ ĐỊNH DANH",

              render: (item: PatientItem) => (
                <span>{item.identificationNumber}</span>
              ),
            },

            {
              title: "SỐ ĐIỆN THOẠI",

              render: (item: PatientItem) => <span>{item.phone}</span>,
            },

            {
              title: "EMAIL",

              render: (item: PatientItem) => <span>{item.email}</span>,
            },

            {
              title: "GIỚI TÍNH",

              render: (item: PatientItem) => <span>{item.gender}</span>,
            },

            {
              fixedRight: true,
              title: "ACTION",

              render: (item: PatientItem) => (
                <div className="flex items-center gap-2">
                  {/* UPDATE */}
                  <CustomButton
                    size="sm"
                    icon={<Pencil className="text-blue-400" />}
                    onClick={() => handleOpenUpdate(item.id)}
                  />

                  {/* DELETE */}
                  <CustomButton
                    size="sm"
                    icon={<Trash2 className="text-red-400" />}
                    onClick={() => handleOpenDelete(item.id)}
                  />
                </div>
              ),
            },
          ]}
        />
      </DataWrapper>

      {/* DELETE DIALOG */}
      <CustomDialog
        open={openDeleteDialog}
        title="Xóa bệnh nhân"
        note="Bạn có chắc chắn muốn xóa bệnh nhân này?"
        type="error"
        onClose={handleClosePopup}
        onSubmit={() => {}}
        titleCancel="Hủy"
        titleSubmit="Xác nhận"
      />

      {/* CREATE POPUP */}
      <CustomPopup open={openCreatePopup} onClose={handleClosePopup}>
        <PopupCreatePatient onClose={handleClosePopup} />
      </CustomPopup>

      {/* UPDATE POPUP */}
      <CustomPopup open={openUpdatePopup} onClose={handleClosePopup}>
        <PopupUpdatePatient onClose={handleClosePopup} id={updateParam || ""} />
      </CustomPopup>
    </div>
  );
};

export default MainPagePatient;