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

import { memo } 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 {
  UpCodeApi,
  LwpoCodeApi,
  LwpoCodeFormSchema,
  type LwpoCodeFormData,
} from "@/entities/code";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useMutationWrapper } from "@/shared/lib";
import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";

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

const LwpoCodeManagementDialog = memo(
  ({
    lwpoCd,
    upCd,
    children,
    open,
    onOpenChange,
    ...props
  }: ManagementLwpoCodeDialogProps) => {
    const isRegistration = !lwpoCd;

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

    const { data: detailData } = useQuery({
      queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, lwpoCd],
      queryFn: () => LwpoCodeApi.lwpoCodeDetail(upCd!, lwpoCd!),
      enabled: !!upCd && !isRegistration,
    });

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

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

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

    const form = useForm<LwpoCodeFormData>({
      resolver: zodResolver(LwpoCodeFormSchema),
      values: {
        lwpoCd: detailData?.lwpoCd ?? "",
        upCd: upCd ?? "",
        lwpoCdNm: detailData?.lwpoCdNm ?? "",
        lwpoCdExpln: detailData?.lwpoCdExpln ?? "",
        unit: detailData?.unit ?? "",
        prntLwpoCd: detailData?.prntLwpoCd ?? "",
        useYn: detailData?.useYn ?? "Y",
        sortSeq: detailData?.sortSeq ?? 0,
        delYn: "N",
      },
    });

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

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

    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 ? createLwpoCode : updateLwpoCode),
              )}
              className="space-y-4"
            >
              <Table variant="secondary">
                <colgroup>
                  <col width="20%" />
                  <col width="80%" />
                </colgroup>
                <TableBody>
                  <TableRow>
                    <TableHead>하위코드</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="lwpoCd"
                        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="lwpoCdNm"
                        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="lwpoCdExpln"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="하위코드 설명을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  {upCodeData?.cdSe === "CODECLUNIT" && (
                    <TableRow>
                      <TableHead>단위</TableHead>
                      <TableCell className="border">
                        <FormField
                          control={form.control}
                          name="unit"
                          render={({ field }) => (
                            <FormItem>
                              <FormControl>
                                <Input
                                  {...field}
                                  value={field.value ?? ""}
                                  className="!text-[1.3rem]"
                                  placeholder="단위를 입력해주세요"
                                />
                              </FormControl>
                            </FormItem>
                          )}
                        />
                      </TableCell>
                    </TableRow>
                  )}
                  {upCodeData?.cdSe === "CODECLTREE" && (
                    <TableRow>
                      <TableHead>상위하위코드</TableHead>
                      <TableCell className="border">
                        <FormField
                          control={form.control}
                          name="prntLwpoCd"
                          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="sortSeq"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                type="number"
                                value={field.value ?? 0}
                                className="!text-[1.3rem]"
                                placeholder="정렬순서를 입력해주세요"
                              />
                            </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.lwpoCd === nextProps.lwpoCd &&
      prevProps.upCd === nextProps.upCd &&
      prevProps.open === nextProps.open
    );
  },
);

LwpoCodeManagementDialog.displayName = "LwpoCodeManagementDialog";

export { LwpoCodeManagementDialog };