import { yupResolver } from "@hookform/resolvers/yup";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
} from "@mui/material";
import {
  ReceiptIssuingOrder,
  completeMailPost,
} from "api/receipt-issuing-order";
import { FormProvider } from "components/hook-form";
import RHFDatePicker from "components/hook-form/RHFDatePicker";
import useAPICall from "hooks/useAPICall";
import useBackDrop from "hooks/useBackDrop";
import useSnackbarCustom from "hooks/useSnackbarCustom";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { now } from "utils/datetime";
import * as Yup from "yup";

type FormProps = {
  date: Date | null;
};

export default function useMailPostCompleteDialog(
  order: ReceiptIssuingOrder | null,
  onComplete?: VoidFunction
) {
  const [show, setShow] = useState(false);
  const { setShowBackDrop } = useBackDrop();
  const { success, error } = useSnackbarCustom();

  const form = useForm<FormProps>({
    defaultValues: {
      date: now(),
    },
    resolver: yupResolver(
      Yup.object().shape({
        date: Yup.date()
          .required("必須項目です")
          .typeError("正しく入力してください"),
      })
    ),
  });

  const { callAPI } = useAPICall({
    apiMethod: completeMailPost,
    backDrop: true,
    onSuccess: () => {
      success("登録しました");
      setShow(false);
      if (onComplete) {
        onComplete();
      }
    },
    onFailed: () => {
      error("失敗しました");
    },
  });

  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };

  const handleSubmit = (data: FormProps) => {
    if (!order) return;
    callAPI({
      id: order.id,
      status_mail_post_date: data.date,
      timestamp: order.updated_at,
    });
  };

  const element = (
    <Dialog open={show} onClose={close}>
      <DialogTitle>投稿完了登録</DialogTitle>

      <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
        <DialogContent>
          <RHFDatePicker name="date" label="投函完了日" />
        </DialogContent>

        <DialogActions>
          <Button onClick={close}>CANCEL</Button>
          <Button type="submit">OK</Button>
        </DialogActions>
      </FormProvider>
    </Dialog>
  );

  return {
    // param
    show,

    // Element
    element,
    // function

    open,
    close,
    setShow,
  };
}