'use client';

import { sendEmailCode, sendSmsCode } from '@/services/common/common';
import { Button } from '@workspace/ui/components/button';
import { useCountDown } from 'ahooks';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { UseFormReturn } from 'react-hook-form'; // For type-safety

interface SendCodeProps {
  type: 'email' | 'phone';
  params: {
    email?: string;
    type?: 1 | 2;
    telephone_area_code?: string;
    telephone?: string;
  };
  form: UseFormReturn<any>; // Add the new form prop
}
export default function SendCode({ type, params, form }: SendCodeProps) {
  const t = useTranslations('auth');
  const [targetDate, setTargetDate] = useState<number>();

  const [, { seconds }] = useCountDown({
    targetDate,
    onEnd: () => {
      setTargetDate(undefined);
    },
  });

  const getEmailCode = async () => {
    // Use form.getValues() to get the latest form data
    const latestValues = form.getValues();
    console.log(11111, latestValues);
    if (latestValues.email && params.type) {
      await sendEmailCode({
        email: latestValues.email,
        type: params.type,
      });
      setTargetDate(Date.now() + 60000);
    }
  };

  const getPhoneCode = async () => {
    // Use form.getValues() to get the latest form data
    const latestValues = form.getValues();
    if (latestValues.telephone && latestValues.telephone_area_code && params.type) {
      await sendSmsCode({
        telephone: latestValues.telephone,
        telephone_area_code: latestValues.telephone_area_code,
        type: params.type,
      });
      setTargetDate(Date.now() + 60000);
    }
  };

  const handleSendCode = async () => {
    if (type === 'email') {
      await getEmailCode();
    } else {
      await getPhoneCode();
    }
  };
  const disabled =
    seconds > 0 ||
    (type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);

  return (
    <Button type='button' onClick={handleSendCode} disabled={disabled}>
      {seconds > 0 ? `${seconds}s` : t('get')}
    </Button>
  );
}