frontend/apps/common/features/src/pages/contents/ui/menu-modification-demand-dialog.tsx

import { memo, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useMutation } from "@tanstack/react-query";
import { zodResolver } from "@hookform/resolvers/zod";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Input,
  DialogTrigger,
  Textarea,
} from "@common/components";
import { useAlertStore } from "@/shared/lib";
import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";
import { MenuModificationDemandApi } from "../api/menu-modification-demand-service";
import {
  menuModificationDemandCreateRequestDtoSchema,
  type MenuModificationDemandCreateRequestDto,
} from "../model/menu-modification-demand-interface";

type MenuModificationDemandDialogProps = {
  menuCd?: number;
};

const MenuModificationDemandDialog = memo(
  ({ menuCd }: MenuModificationDemandDialogProps) => {
    const [open, setOpen] = useState(false);
    const { confirm } = useConfirm();
    const alert = useAlertStore((state) => state.setMessage);

    const { mutateAsync: createMenuModificationDemand } = useMutation({
      mutationFn: (data: MenuModificationDemandCreateRequestDto) =>
        MenuModificationDemandApi.createMenuModificationDemand(data),
      onSuccess: () => {
        alert("메뉴 수정 요청이 등록되었습니다.", () => setOpen(false));
      },
    });

    const form = useForm<MenuModificationDemandCreateRequestDto>({
      resolver: zodResolver(menuModificationDemandCreateRequestDtoSchema),
      defaultValues: {
        menuCd: menuCd ?? 0,
        mdfcnCn: "",
        aplcnt: "",
        aplcntEml: "",
      },
    });

    const onSubmit = async (data: MenuModificationDemandCreateRequestDto) => {
      if (await confirm("메뉴 수정 요청을 등록하시겠습니까?")) {
        createMenuModificationDemand(data);
      }
    };

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

    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button size="lg" color="white">
            수정요청
          </Button>
        </DialogTrigger>
        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
          <DialogHeader>
            <DialogTitle>메뉴 수정 요청</DialogTitle>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <Table variant="secondary">
                <colgroup>
                  <col width="15%" />
                  <col width="85%" />
                </colgroup>
                <TableBody>
                  <TableRow>
                    <TableHead scope="row">신청자</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="aplcnt"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="신청자명을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead scope="row">이메일</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="aplcntEml"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="이메일을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableHead scope="row">요청 내용</TableHead>
                    <TableCell className="border">
                      <FormField
                        control={form.control}
                        name="mdfcnCn"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Textarea
                                {...field}
                                value={field.value ?? ""}
                                className="!text-[1.3rem]"
                                placeholder="요청 내용을 입력해주세요"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
              <DialogFooter className="!justify-center">
                <Button size="lg" type="submit">
                  요청하기
                </Button>
                <DialogClose asChild>
                  <Button size="lg" color="white">
                    취소
                  </Button>
                </DialogClose>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    );
  },
);

MenuModificationDemandDialog.displayName = "MenuModificationDemandDialog";

export { MenuModificationDemandDialog };