'use client'

import { useState, ChangeEvent, useEffect } from 'react';
import { InputMask } from '@react-input/mask';
import styles from '@/app/styles/module/login.module.scss';

interface PhoneInputProps {
	phoneState: string | undefined;
	validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
	clearCondition?: string | undefined | null
}

export default function PhoneInput({ phoneState, validateHandler, clearCondition }: PhoneInputProps) {
	const [phone, setPhone] = useState<string | undefined>(phoneState ? phoneState : '');

	useEffect(() => {
		if (clearCondition) {
			setPhone('');
		}
	}, [clearCondition])

	return (
		<InputMask
			type="phone"
			id="phone"
			name="phone"
			className={`${styles['form-input']}`}
			mask="+7 (___) ___-__-__"
			replacement={{ _: /\d/ }}
			value={phone}
			onChange={(e) => {
				setPhone(e.target.value);
				validateHandler(e);
			}}
			placeholder="+7 (999) 123-45-67"
		/>
	)
}