import { DatePicker } from '@wordpress/components';

const DateField = ({field, value, onChange}) => {
	// const [ date, setDate ] = useState( new Date() );

	return (
		<div className="components-base-control" id={field.name}>
			<label className="components-base-control__label">
				{ field.label }
			</label>
			<DatePicker
				currentDate={ toLocalDate(value) }
				onChange={ onChange }
				help={ field.description }
			/>
			{ getDescription(field) }
		</div>
	);
};

const toLocalDate = (value) => {
	if (!value) return null;
	const [year, month, day] = value.split('-').map(Number);
	if (!year || !month || !day) return null;
	return new Date(year, month - 1, day);
};

const getDescription = (field) => {
	if (!field.description || field.description.length === 0) return;
	return (
		<p className="hint">{field.description}</p>
	)
};

export default DateField;