import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Button, Stack, Typography } from "@mui/material";
import { HasChildren } from "@types";
import {
  FormProvider,
  RHFAutoComplete,
  RHFTextField,
} from "components/hook-form";
import {
  AutoCompleteOption,
  AutoCompleteOptionType,
  getValue,
} from "components/hook-form/RHFAutoComplete";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as Yup from "yup";

type AreaBoxProps = {
  title: string;
} & HasChildren;
function AreaBox({ title, children }: AreaBoxProps) {
  return (
    <Box sx={{ maxWidth: 500 }}>
      <Typography variant="subtitle1">{title}</Typography>
      {children}
    </Box>
  );
}

type FormProps = {
  address: string;
};

type Props = {
  onNext?: VoidFunction;
  onPrev?: VoidFunction;
};
export default function useInputSMSSendAddress({ onNext, onPrev }: Props) {
  const form = useForm<FormProps>({
    defaultValues: {
      address: "",
    },
    resolver: yupResolver(
      Yup.object().shape({
        address: Yup.string()
          .required("必須項目です")
          .matches(/^[0-9]{11}$/, "正しい電話番号を入力してください"),
      })
    ),
  });

  const handleSubmit = () => {
    if (onNext) {
      onNext();
    }
  };

  const handlePrev = () => {
    if (onPrev) {
      onPrev();
    }
  };

  const element = (
    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
      <Stack spacing={2} sx={{ p: 1, m: 1 }}>
        <AreaBox title="SMS送信先">
          <RHFTextField name="address" size="small" />
        </AreaBox>
        <Stack direction="row" spacing={2}>
          <Button variant="text" onClick={handlePrev}>
            戻る
          </Button>
          <Button variant="contained" type="submit">
            次へ
          </Button>
        </Stack>
      </Stack>
    </FormProvider>
  );

  return { element, values: form.getValues };
}