import { Button } from "@mantine/core";
import PhoneNumberInput from "@/components/phone-number-input";
import { useForm } from "@mantine/form";
import { Trans, useLingui } from "@lingui/react/macro";
import useCreateCode from "../hooks/use-create-code";

const PhonePrompt = () => {
  const { t } = useLingui();
  const form = useForm({
    initialValues: {
      number: ''
    },
    validate: {
      number: (value) => {
        if (value.length === 0) return t`Phone number is required`
        if (value.length !== 10) return t`Phone number must be 10 digits`
      }
    }
  })

  const { mutate: createCode, isPending } = useCreateCode();
  const handleSubmit = (data: { number: string }) => {
    form.reset();
    return createCode(data.number);
  }


  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <PhoneNumberInput
        id="number"
        label={t`Enter your phone number`}
        key={form.key('number')}
        {...form.getInputProps('number')}
      />
      <Button type='submit' w='100%' mt='10px' variant='filled' loading={isPending}><Trans>Send Code</Trans></Button>
    </form>
  )
}

export default PhonePrompt;