'use client';
import { useState, useActionState } from 'react';
import AlbumSelect from '@/components/albumselect';
import {createPhoto} from '@/lib/photo_functions';

interface IPhotoData {
    albumId: number,
    title: string,
    url: string,
    thumbnailUrl: string
}

// We can create our own function for handling AJAX on the client-side
// However, an async function is not allowed in a client component
// We can use useActionState to handle the async function or similar
// hooks to call it. In this example, we use useActionState.
async function handleInsert(state: string, data: FormData) {
    let json: IPhotoData = {
        albumId: parseInt(data.get('albumIdSelect').toString()),
        title: data.get('title-textbox').toString(),
        url: data.get('url-textbox').toString(),
        thumbnailUrl: data.get('thumbnailurl-textbox').toString()
    };

    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/photos', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(json)
        });

        if (!response.ok)
            return `Response status: ${response.status}`;

        return "Successfully added photo";
    }
    catch (error) {
        return error.message;
    }
}

// Alternatively, we can use a server function from the client
// Next.js automatically realises the createPhoto function has to packaged
// and sent to client.
async function handleInsertFunction(state: string, data: FormData) {
    let json: IPhotoData = {
        albumId: parseInt(data.get('albumIdSelect').toString()),
        title: data.get('title-textbox').toString(),
        url: data.get('url-textbox').toString(),
        thumbnailUrl: data.get('thumbnailurl-textbox').toString()
    };

    try {
        await createPhoto(json);
        return "Successfully added photo";
    }
    catch (error) {
        return error.message;
    }
}

export default function PhotoInsert(props) {
    const [showPhotoInsert, setShowPhotoInsert] = useState(false);
    const [albumId, setAlbumId] = useState(101);
    const [title, setTitle] = useState('');
    const [url, setUrl] = useState('');
    const [thumbnailUrl, setThumbnailUrl] = useState('');
    const [message, formAction, isPending] = useActionState(handleInsertFunction, '');

    const data = {
        albumId,
        title,
        url,
        thumbnailUrl
    };

    function handleAlbumSelect(albumId) {
        setAlbumId(albumId);
    }

    const togglePhotoInsert = (e) => {
        setShowPhotoInsert(!showPhotoInsert);
        e.preventDefault();
    };

    return (
        <form action={formAction}>
            <button onClick={togglePhotoInsert}>
                {showPhotoInsert ? '<<' : '>>'}
            </button>
            <AlbumSelect onAlbumSelect={handleAlbumSelect} />
            <br />
            {showPhotoInsert && <div>
                <label htmlFor="title-textbox">Title:</label>
                <input id="title-textbox" name="title-textbox" type="text"
                    value={title} onChange={(e) => setTitle(e.target.value)}
                />
                <br />
                <label htmlFor="url-textbox">URL:</label>
                <input id="url-textbox" name="url-textbox" type="text"
                    value={url} onChange={(e) => setUrl(e.target.value)}
                />
                <br />
                <label htmlFor="thumbnailurl-textbox">Thumbnail URL:</label>
                <input id="thumbnailurl-textbox" name="thumbnailurl-textbox" type="text"
                    value={thumbnailUrl} onChange={(e) => setThumbnailUrl(e.target.value)}
                />
                <br />
                <input type="submit" value="Insert Photo" />
                <br />{isPending ? "Loading..." : message}
            </div>}
        </form>
    );
}