frontend/apps/cs/src/pages/module/ui/module-page.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

import { keepPreviousData, useQuery } from "@tanstack/react-query";
import {
  getCoreRowModel,
  type OnChangeFn,
  type PaginationState,
} from "@tanstack/react-table";

import { ENDPOINT } from "@/shared/config";
import { useDataTable, useSearchParamsState } from "@/shared/lib";
import {
  type Authorizations,
  AuthorizationsApi,
} from "@/entities/authorization";
import { CodeSelect } from "@/entities/code";
import { Button, Input, Label } from "@common/components";

import { columns } from "../model/authorizations-table-columns";

const DEFAULT_PARAMS = {
  authorizationName: "",
  urlPatternValue: "",
  httpMethodCode: "",
  sort: "regDt,desc",
  page: 0,
  size: 10,
};

function ModulePage() {
  const router = useRouter();
  const { params, setParams, resetParams } =
    useSearchParamsState(DEFAULT_PARAMS);
  const [authorizationName, setAuthorizationName] = useState(
    params.authorizationName,
  );
  const [urlPatternValue, setUrlPatternValue] = useState(
    params.urlPatternValue,
  );
  const [httpMethodCode, setHttpMethodCode] = useState(params.httpMethodCode);

  const query = useQuery({
    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, params],
    queryFn: () =>
      AuthorizationsApi.getAuthorizationsList({
        authorizationName: params.authorizationName,
        urlPatternValue: params.urlPatternValue,
        httpMethodCode: params.httpMethodCode,
        sort: params.sort,
        page: params.page,
        size: params.size,
      }),
    placeholderData: keepPreviousData,
  });

  const pagination: PaginationState = {
    pageIndex: params.page,
    pageSize: params.size,
  };

  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
    const next = typeof updater === "function" ? updater(pagination) : updater;
    setParams({ page: next.pageIndex, size: next.pageSize });
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setParams({ authorizationName, urlPatternValue, httpMethodCode, page: 0 });
  };

  const handleReset = () => {
    setAuthorizationName("");
    setUrlPatternValue("");
    setHttpMethodCode("");
    resetParams();
  };

  const handleRowClick = (row: Authorizations) => {
    router.push(`/module/register/${row.authorizationNo}`);
  };

  const { tableComponent } = useDataTable({
    query,
    tableOptions: {
      columns,
      state: {
        pagination,
      },
      onPaginationChange: handlePaginationChange,
      getCoreRowModel: getCoreRowModel(),
      manualPagination: true,
    },
    dataTableOptions: {
      onRowClick: handleRowClick,
      viewPagination: true,
    },
  });

  return (
    <div className="card card-border !mt-6">
      <div className="card card-border">
        <form onSubmit={handleSubmit} className="flex gap-2 p-2">
          <div className="flex space-x-6">
            <div className="flex items-center gap-2">
              <Label htmlFor="httpMethodCode" className="text-label">
                요청 메소드
              </Label>
              <CodeSelect
                upCd="HTTPMHD"
                value={httpMethodCode}
                onValueChange={(value) => setHttpMethodCode(value)}
              />
            </div>
            <div className="flex items-center gap-2">
              <Label htmlFor="authorizationName" className="text-label">
                API명
              </Label>
              <Input
                id="authorizationName"
                className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
                value={authorizationName}
                onChange={(e) => setAuthorizationName(e.target.value)}
              />
            </div>
            <div className="flex items-center gap-2">
              <Label htmlFor="urlPatternValue" className="text-label">
                API URL
              </Label>
              <Input
                id="urlPatternValue"
                className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
                value={urlPatternValue}
                onChange={(e) => setUrlPatternValue(e.target.value)}
              />
            </div>
          </div>
          <Button className="h-[3.2rem]" type="submit">
            조회
          </Button>
          <Button
            type="button"
            color="white"
            className="h-[3.2rem]"
            onClick={handleReset}
          >
            초기화
          </Button>
        </form>
      </div>
      <div className="card card-border">
        <div className="card-header">
          <h3 className="text-2xl font-medium text-label">모듈API 목록</h3>
          <Button onClick={() => router.push("/module/register")}>등록</Button>
        </div>
        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
      </div>
    </div>
  );
}

export { ModulePage };