KT-MyPage-front/src/pages/dashboard/contract/sticker-re-order.tsx

import { Box, Button, Stack, Typography } from "@mui/material";
import { HasChildren } from "@types";
import { reOrderSticker } from "api/season-ticket-contract";
import { FormProvider, RHFTextField } from "components/hook-form";
import { RHFUpload } from "components/hook-form/RHFUpload";
import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
import useAPICall from "hooks/useAPICall";
import useDashboard from "hooks/useDashBoard";
import useNavigateCustom from "hooks/useNavigateCustom";
import useSnackbarCustom from "hooks/useSnackbarCustom";
import { useUpload } from "hooks/useUpload";
import { PageID, TabID } from "pages";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { getPath } from "routes/path";

type AreaBoxProps = {
  label: string;
} & HasChildren;
function AreaBox({ label, children }: AreaBoxProps) {
  return (
    <Box>
      <Typography variant="body2">{label}</Typography>
      {children}
    </Box>
  );
}

type FormProps = {
  upload1: File[];
};

export default function StickerReOrder() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER,
    TabID.NONE
  );

  const form = useForm<FormProps>({
    defaultValues: {
      upload1: [],
    },
  });

  const { navigateWhenChanged, navigate } = useNavigateCustom();

  const { error } = useSnackbarCustom();

  const { selectedseasonTicketContract } = useSeasonTicketContractContext();

  const [done, setDone] = useState(false);

  const { callAPI: callReOrderSticker } = useAPICall({
    apiMethod: reOrderSticker,
    backDrop: true,
    onSuccess: () => {
      setDone(true);
    },
    onFailed: () => {
      error("依頼失敗しました");
    },
  });

  const handleSubmit = (data: FormProps) => {
    console.log(data);
    return;
    // if (selectedseasonTicketContract === null) return;
    // callReOrderSticker({
    //   season_ticket_contract_record_no:
    //     selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
    // });
  };

  useEffect(() => {
    setHeaderTitle("シール再発行依頼");
    setTabs(null);
  }, [setHeaderTitle, setTabs]);

  useEffect(() => {
    if (selectedseasonTicketContract === null) {
      navigateWhenChanged(
        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
      );
    }
  }, [selectedseasonTicketContract]);

  if (selectedseasonTicketContract === null) {
    return null;
  }
  if (done) {
    return (
      <Box sx={{ mt: 1 }}>
        <Stack spacing={2}>
          <Box>依頼しました</Box>
          <Box>
            <Button
              onClick={() => {
                navigate(-1);
              }}
            >
              戻る
            </Button>
          </Box>
        </Stack>
      </Box>
    );
  }

  return (
    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
      <Box sx={{ mt: 1 }}>
        <Stack spacing={2}>
          <Box>
            <Button
              onClick={() => {
                navigate(-1);
              }}
            >
              戻る
            </Button>
          </Box>

          <AreaBox label="申請理由">
            <RHFTextField
              name="reason"
              size="small"
              multiline
              minRows={3}
              maxRows={10}
            />
          </AreaBox>

          <AreaBox label="アップロード">
            <RHFUpload name="upload1" />
          </AreaBox>
          <Box>
            <Button variant="contained" type="submit">
              確定
            </Button>
          </Box>
        </Stack>
      </Box>
    </FormProvider>
  );
}