frontend/apps/cs/src/pages/module/ui/management-authority-dialog.tsx

import { useState, memo, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery } from "@tanstack/react-query";
import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@common/components";
import {
  RoleAuthorizationsApi,
  roleAuthorizationsFormSchema,
  type RoleAuthorizationsFormData,
  type RoleAuthorizationsData,
} from "@/entities/role-authorization";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";
import { createColumns } from "../model/role-authorizations-table-columns";
import type { Authorizations } from "@/entities/authorization";

type ManagementAuthorityDialogProps = {
  authorizationNo?: string;
  rowData?: Authorizations;
} & React.ComponentProps<typeof Dialog>;

const ManagementAuthorityDialog = memo(
  ({ authorizationNo, rowData }: ManagementAuthorityDialogProps) => {
    const { confirm } = useConfirm();
    const alert = useAlertStore((state) => state.setMessage);

    const [open, setOpen] = useState(false);
    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

    const query = useQuery({
      queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, authorizationNo],
      queryFn: () =>
        RoleAuthorizationsApi.getRoleAuthorizationsList({ authorizationNo }),
      enabled: !!authorizationNo && open,
    });

    const { mutateAsync: saveRoleAuthorization } = useMutationWrapper({
      mutationFn: (data: RoleAuthorizationsData) =>
        RoleAuthorizationsApi.createRoleAuthorizations(data),
      onSuccess: () => {
        alert("저장되었습니다.", () => setOpen(false));
      },
    });

    const form = useForm<RoleAuthorizationsFormData>({
      resolver: zodResolver(roleAuthorizationsFormSchema),
      values: {
        roleAuthorizations:
          query.data?.content.map(({ roleId, authorizationNo, useYn }) => ({
            roleId,
            authorizationNo,
            authYn: useYn,
          })) ?? [],
      },
    });

    const { tableComponent } = useDataTable({
      query,
      tableOptions: {
        columns: createColumns(form),
        state: {
          rowSelection,
        },
        getCoreRowModel: getCoreRowModel(),
        onRowSelectionChange: setRowSelection,
      },
    });

    const handleSave = async () => {
      if (await confirm("저장하시겠습니까?")) {
        const data = form.getValues("roleAuthorizations");
        await saveRoleAuthorization(data);
      }
    };

    useEffect(() => {
      if (!open) form.reset();
    }, [open]);

    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button size="sm">관리</Button>
        </DialogTrigger>
        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
          <DialogHeader>
            <DialogTitle>모듈API 권한관리</DialogTitle>
          </DialogHeader>
          <div className="flex flex-col gap-8">
            <Table variant="line">
              <TableHeader>
                <TableRow>
                  <TableHead>API명</TableHead>
                  <TableHead>요청 메소드</TableHead>
                  <TableHead>API URL</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell align="center">
                    {rowData?.authorizationName}
                  </TableCell>
                  <TableCell align="center">
                    {rowData?.httpMethodCode}
                  </TableCell>
                  <TableCell align="center">
                    {rowData?.urlPatternValue}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
            <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
          </div>
          <DialogFooter className="!justify-center">
            <Button size="lg" onClick={handleSave}>
              저장
            </Button>
            <DialogClose asChild>
              <Button size="lg" color="white">
                취소
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  },
  (prevProps, nextProps) => {
    return prevProps.authorizationNo === nextProps.authorizationNo;
  },
);

ManagementAuthorityDialog.displayName = "ManagementAuthorityDialog";

export { ManagementAuthorityDialog };