frontend/apps/cs/src/pages/code/ui/upcode-dialog.tsx

import { memo, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery } from "@tanstack/react-query";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Input,
  RadioGroup,
  RadioGroupItem,
  Label,
  DialogTrigger,
} from "@common/components";
import {
  CodeSelect,
  UpCodeApi,
  upCodeFormSchema,
  type UpCodeFormData,
} from "@/entities/code";
import { SiteSelect } from "@/entities/site";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useMutationWrapper } from "@/shared/lib";
import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";

type UpCodeManagementDialogProps = {
  upCd?: string;
  children?: React.ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
};

const UpCodeManagementDialog = memo(
  ({
    upCd,
    children,
    open,
    onOpenChange,
    ...props
  }: UpCodeManagementDialogProps) => {
    const isRegistration = !upCd;

    const { confirm } = useConfirm();
    const alert = useAlertStore((state) => state.setMessage);

    const { data: detailData } = useQuery({
      queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd],
      queryFn: () => UpCodeApi.upCodeDetail(upCd!),
      enabled: open && !!upCd,
    });

    const { mutateAsync: createUpCode } = useMutationWrapper({
      mutationFn: (data: UpCodeFormData) => UpCodeApi.createUpCode(data),
      onSuccess: () => {
        alert("등록되었습니다.", () => onOpenChange?.(false));
      },
    });

    const { mutateAsync: updateUpCode } = useMutationWrapper({
      mutationFn: (data: UpCodeFormData) => UpCodeApi.updateUpCode(upCd!, data),
      onSuccess: () => {
        alert("수정되었습니다.", () => onOpenChange?.(false));
      },
    });

    const form = useForm<UpCodeFormData>({
      resolver: zodResolver(upCodeFormSchema),
      values: {
        upCd: detailData?.upCd ?? "",
        upCdNm: detailData?.upCdNm ?? "",
        cdSe: detailData?.cdSe ?? "",
        siteId: detailData?.siteId ?? "",
        upCdExpln: detailData?.upCdExpln ?? "",
        useYn: detailData?.useYn ?? "Y",
        delYn: "N",
      },
    });

    const onSubmit =
      (callback: (data: UpCodeFormData) => void) =>
      async (data: UpCodeFormData) => {
        const confirmMessage = isRegistration
          ? "등록하시겠습니까?"
          : "수정하시겠습니까?";

        if (await confirm(confirmMessage)) callback(data);
      };

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

    return (
      <Dialog open={open} onOpenChange={onOpenChange} {...props}>
        <DialogTrigger asChild>{children}</DialogTrigger>
        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
          <DialogHeader>
            <DialogTitle>
              {isRegistration ? "상위코드 등록" : "상위코드 관리"}
            </DialogTitle>
          </DialogHeader>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(
                onSubmit(isRegistration ? createUpCode : updateUpCode),
              )}
              className="space-y-4"
            >
              <Table variant="secondary">
                <colgroup>
                  <col width="15%" />
                  <col width="85%" />
                </colgroup>
                <TableBody>
                  <TableRow>
                    <TableHead>상위코드</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="upCd"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="상위코드를를 입력해주세요"
                                disabled={!isRegistration}
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead>상위코드명</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="upCdNm"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="상위코드명을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead>상위코드설명</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="upCdExpln"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="상위코드설명을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead>코드구분</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="cdSe"
                        render={({ field }) => (
                          <FormItem className="flex flex-col">
                            <FormControl>
                              <CodeSelect
                                upCd="CODECL"
                                value={field.value || ""}
                                onValueChange={field.onChange}
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead>사이트</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="siteId"
                        render={({ field }) => (
                          <FormItem className="flex flex-col">
                            <FormControl>
                              <SiteSelect
                                value={field.value || ""}
                                onValueChange={field.onChange}
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead>사용여부</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="useYn"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <RadioGroup
                                {...field}
                                name="useYn"
                                onValueChange={field.onChange}
                              >
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value="Y" id="useY" />
                                  <Label htmlFor="useY">사용</Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value="N" id="useN" />
                                  <Label htmlFor="useN">사용안함</Label>
                                </div>
                              </RadioGroup>
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
              <DialogFooter className="!justify-center">
                <Button size="lg" type="submit">
                  {isRegistration ? "등록" : "저장"}
                </Button>
                <DialogClose asChild>
                  <Button size="lg" color="white">
                    취소
                  </Button>
                </DialogClose>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    );
  },
  (prevProps, nextProps) => {
    return (
      prevProps.upCd === nextProps.upCd && prevProps.open === nextProps.open
    );
  },
);

UpCodeManagementDialog.displayName = "UpCodeManagementDialog";

export { UpCodeManagementDialog };