'use client';

// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------------ React --------------------------------------------------------
import { FormEvent } from 'react';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import CheckIcon from '@/assets/CheckIcon';
import CloseIcon from '@/assets/CloseIcon';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const InlineInput = ({
	label = '',
	name = '',
	type = 'text',
	placeholder = '',
	defaultValue = '',
	autoComplete = 'off',
	onSubmit = (value?: string) => {},
}) => {
	const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
		ev.preventDefault();

		if (!ev.currentTarget.reportValidity()) {
			return;
		}

		const formData = new FormData(ev.currentTarget);

		const value = formData.get(name);

		onSubmit(value ? value.toString() : null);
	};

	return (
		<form
			className='inlineInputContainer'
			onSubmit={handleSubmit}
		>
			<label
				htmlFor={name}
				className='inlineInputLabel'
			>
				{label}
			</label>

			<div className='inlineInputRow'>
				<input
					type={type}
					name={name}
					id={name}
					defaultValue={defaultValue}
					placeholder={placeholder}
					autoComplete={autoComplete}
					className='inlineInput'
					required
				/>
				<button
					type='reset'
					className='inlineInputButton'
				>
					<CloseIcon />
				</button>
				<button
					type='submit'
					className='inlineInputButton'
				>
					<CheckIcon />
				</button>
			</div>
		</form>
	);
};

export default InlineInput;