import { useState, useEffect } from '@wordpress/element';
import { TextControl, TextareaControl } from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { useSelect, useDispatch } from '@wordpress/data';

const SingleMeta = () => {
    const postId = useSelect(select => select('core/editor').getCurrentPostId());
    const [metaValue, setMetaValue] = useState({ url: '', date_start: '', date_end: '', start_time: '', end_time:'', description:'' });
    const { editPost } = useDispatch('core/editor');

    useEffect(() => {
        if (postId) {
            apiFetch({ path: `/wp/v2/fsdpe-events/${postId}` })
                .then(post => {
                    const meta = post.meta._fsdpe_events_meta_key || { url: '', date_start: '', date_end: '', start_time:'', end_time:'', description:'' };
                    setMetaValue(meta);
                })
                .catch(error => {
                    console.error('Error fetching post meta:', error);
                });
        }
    }, [postId]);

    useEffect(() => {
        if (postId) {
            editPost({ meta: { _fsdpe_events_meta_key: metaValue } });
        }
    }, [metaValue, postId, editPost]);

    const handleUrlChange = (value) => setMetaValue(prevMeta => ({ ...prevMeta, url: value }));
    const handleDescriptionChange = (value) => setMetaValue(prevMeta => ({ ...prevMeta, description: value }));

    const handleDateStartChange = (event) => setMetaValue(prevMeta => ({ ...prevMeta, date_start: event.target.value }));
    const handleStartTimeChange = (event) => setMetaValue(prevMeta => ({ ...prevMeta, start_time: event.target.value }));
    const handleEndTimeChange = (event) => setMetaValue(prevMeta => ({ ...prevMeta, end_time: event.target.value }));

    return postId ? (
        <div className={"fsdpe-metaboxes"}>
            <div className={"fsdpe-metaboxes__dates"}>
                <input
                    aria-label="Start Time"
                    type="time"
                    value={metaValue.start_time}
                    onChange={handleStartTimeChange}
                />
                <input
                    aria-label="End Time"
                    type="time"
                    value={metaValue.end_time}
                    onChange={handleEndTimeChange}
                />
                <input
                    type="date"
                    id="start"
                    name="trip-start"
                    onChange={handleDateStartChange}
                    value={metaValue.date_start}
                    required
                />
            </div>
            <div className={"fsdpe-metaboxes__textfields"}>
                <TextControl
                    label="Google maps URL:"
                    value={metaValue.url}
                    onChange={handleUrlChange}
                />
                <TextareaControl
                    label="Event description"
                    value={metaValue.description}
                    onChange={handleDescriptionChange}
                />
            </div>
        </div>
    ) : (
        <div>Loading...</div>
    );
};

export {SingleMeta};