/**
 * Template Saver - save current schema as template.
 *
 * @package Schema_AI
 */

import { useState } from '@wordpress/element';
import { Button, Modal, TextControl, TextareaControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';

function TemplateSaver( { schema, schemaType, onSaved } ) {
	const [ isOpen, setIsOpen ] = useState( false );
	const [ name, setName ] = useState( '' );
	const [ description, setDescription ] = useState( '' );
	const [ isPublic, setIsPublic ] = useState( false );
	const [ saving, setSaving ] = useState( false );

	const handleSave = async () => {
		setSaving( true );
		try {
			await apiFetch( {
				path: '/schema-ai/v1/templates',
				method: 'POST',
				data: { name, description, schema_type: schemaType, template_data: schema, is_public: isPublic },
			} );
			setIsOpen( false );
			if ( onSaved ) onSaved();
		} catch ( err ) {
			alert( err.message );
		} finally {
			setSaving( false );
		}
	};

	return (
		<>
			<Button variant="secondary" onClick={ () => setIsOpen( true ) } isSmall>{ __( 'Save as Template', 'schema-ai' ) }</Button>
			{ isOpen && (
				<Modal title={ __( 'Save as Template', 'schema-ai' ) } onRequestClose={ () => setIsOpen( false ) }>
					<TextControl label={ __( 'Template Name', 'schema-ai' ) } value={ name } onChange={ setName } required />
					<TextareaControl label={ __( 'Description', 'schema-ai' ) } value={ description } onChange={ setDescription } />
					<TextControl label={ __( 'Schema Type', 'schema-ai' ) } value={ schemaType } disabled />
					<ToggleControl label={ __( 'Make Public', 'schema-ai' ) } checked={ isPublic } onChange={ setIsPublic } />
					<Button variant="primary" onClick={ handleSave } disabled={ ! name || saving } isBusy={ saving }>{ __( 'Save Template', 'schema-ai' ) }</Button>
				</Modal>
			) }
		</>
	);
}

export default TemplateSaver;