no-copy-frontend/src/app/ui/inputs/phone-input.tsx

'use client'

import { useState, ChangeEvent, useEffect, useRef, KeyboardEvent } from 'react';
import styles from '@/app/styles/login.module.scss';

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

export default function PhoneInput({ phoneState, validateHandler }: PhoneInputProps) {
	const [phone, setPhone] = useState(phoneState ? phoneState : '');
	const inputRef = useRef<HTMLInputElement>(null);

	const formatPhoneNumber = (value: string, isBackspace: boolean): string => {
		if (value === '+') {
			return value;
		}

		const digitsOnly = value.replace(/\D/g, '');

		if (!digitsOnly) {
			return '';
		}

		const limitedDigits = digitsOnly.slice(0, 11);
		const countryCode = 7;
		const phoneNumber = limitedDigits.startsWith('7')
			? limitedDigits.slice(1)
			: limitedDigits;

		let formatted = `+${countryCode}`;

		if (phoneNumber.length > 0) {
			formatted += ` (${phoneNumber.slice(0, 3)}`;
		}
		if (phoneNumber.length >= 3) {
			formatted += `) ${phoneNumber.slice(3, 6)}`;
		}
		if (phoneNumber.length >= 6) {
			formatted += `-${phoneNumber.slice(6, 8)}`;
		}
		if (phoneNumber.length >= 8) {
			formatted += `-${phoneNumber.slice(8, 10)}`;
		}

		if (isBackspace) {
			const lastChar = formatted[formatted.length - 1];
			const specialChars = ['-', '(', ')', ' '];

			if (specialChars.includes(lastChar)) {
				if (lastChar === ' ' && formatted[formatted.length - 2] === ')') {
					return formatted.slice(0, -2);
				}
				return formatted.slice(0, -1);
			}
		}

		return formatted;
	};

	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
		const input = e.target.value;
		const nativeEvent = e.nativeEvent as InputEvent;
		const isBackspace = nativeEvent.inputType === 'deleteContentBackward';
		const formatted = formatPhoneNumber(input, isBackspace);
		setPhone(formatted);
	};

	const range = useRef<{
		start: number | null,
		key: string;
	} | null>(null);

	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
		const input = e.currentTarget;
		range.current = {
			start: input.selectionStart,
			key: e.key
		};
	};

	useEffect(() => {
		console.log('use');
		if (range.current?.key === 'Backspace' && inputRef.current) {
			const startPos = range.current.start ?? 0;
			const newPosition = Math.max(0, startPos - 1);
			inputRef.current.setSelectionRange(newPosition, newPosition);
		} else if (range.current?.key === 'Delete' && inputRef.current) {
			inputRef.current.setSelectionRange(range.current.start, range.current.start);
		}

	}, [phone]);

	return (
		<input
			type="phone"
			id="phone"
			name="phone"
			ref={inputRef}
			className={`${styles['form-input']}`}
			placeholder="+7 (999) 123-45-67"
			value={phone}
			onChange={(e) => {
				handleChange(e);
				validateHandler(e);
			}}
			onKeyDown={(e) => {
				handleKeyDown(e);
			}}
		/>
	)
}