'use client'

import { useTranslations } from 'next-intl';
import { useActionState, useState, useEffect } from 'react';
import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';

export default function PersonalDataSettings() {
	const [errorMessage, formAction, isPending] = useActionState(
		(state: void | undefined, formData: FormData) => {
			console.log(formData);
		},
		undefined
	);

	const {
		data: userData,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['userData'],
		queryFn: () => {
			return getUserData();
		}
	});

	useEffect(() => {
		console.log(userData)
	}, [userData]);

	const t = useTranslations('Global');

	return (
		<div className="settings-form">
			<div className="form-section">
				<h3 className="form-section-title">
					{t('personal-data')}
				</h3>
				<form action={formAction}>
					<div className="form-group">
						<label className="form-label">
							{t('full-name')}:
						</label>
						<input
							type="text"
							name="full_name"
							className="form-input"
							defaultValue={userData?.fullName}
						/>
					</div>
					{userData?.company && (
						<div className="form-group">
							<label className="form-label">
								{t('company')}:
							</label>
							<input
								type="text"
								name="company"
								className="form-input"
								defaultValue={userData?.company}
							/>
						</div>
					)}
					<div className="form-group">
						<label className="form-label">
							{t('email')}:
						</label>
						<input
							type="text"
							name="email"
							className="form-input"
							defaultValue={userData?.email}
							disabled={true}
						/>
						<small>
							{t('email-cant-change')}
						</small>
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('phone')}:
						</label>
						<input
							type="phone"
							name="phone"
							className="form-input"
							defaultValue={userData?.phone}
						/>
					</div>
					<button type="submit" className="btn btn-primary">
						{t('save-changes')}
					</button>
				</form>
			</div >
		</div >
	)
}