import React, { Fragment, useState } from 'react';
import { Element, Link } from 'react-scroll';
import CopyToClipboard from 'react-copy-to-clipboard';

import Header from '../../general/Header';
import Footer from '../../general/Footer';

import Loader from 'Shared/Loader';
import { __wprm } from 'Shared/Translations';
import Api from 'Shared/Api';
import Icon from 'Shared/Icon';

import FieldGroup from '../../fields/FieldGroup';

import RecipeImport from './RecipeImport';
import RecipeMedia from './RecipeMedia';
import RecipePostType from './RecipePostType';
import RecipeGeneral from './RecipeGeneral';
import RecipeTimes from './RecipeTimes';
import RecipeCategories from './RecipeCategories';
import RecipeIngredients from './RecipeIngredients';
import RecipeEquipment from './RecipeEquipment';
import RecipeInstructions from './RecipeInstructions';
import RecipeNutrition from './RecipeNutrition';
import RecipeCustomFields from './RecipeCustomFields';
import RecipeNotes from './RecipeNotes';
 
const EditRecipe = (props) => {
    const hasUpload = props.recipe.video_id > 0;
    const hasEmbed = ! hasUpload && ( -1 == props.recipe.video_id || props.recipe.video_embed );
    const hasVideo = hasUpload || hasEmbed;

    const [nutritionWarning, setNutritionWarning] = useState(false);

    let structure = [
        {
            id: 'import', name: __wprm( 'Import' ),
            elem: (
                <RecipeImport
                    onImportJSON={ props.onImportJSON }
                    openSecondaryModal={ props.openSecondaryModal }
                    onRecipeChange={ props.onRecipeChange }
                    recipe={ props.recipe }
                    scrollToGroup={ props.scrollToGroup }
                />
            )
        },
        {
            id: 'media', name: __wprm( 'Media' ),
            elem: (
                <RecipeMedia
                    image={{
                        id: props.recipe.image_id,
                        url: props.recipe.image_url,
                    }}
                    pinImage={{
                        id: props.recipe.pin_image_id,
                        url: props.recipe.pin_image_url,
                        repin: props.recipe.pin_image_repin_id,
                    }}
                    video={{
                        id: props.recipe.video_id,
                        thumb: props.recipe.video_thumb_url,
                        embed: props.recipe.video_embed,
                    }}
                    onRecipeChange={ props.onRecipeChange }
                />
            )
        }
    ];

    if ( 'public' === wprm_admin.settings.post_type_structure || 'manual' === wprm_admin.settings.recipe_use_author ) {
        structure.push({
            id: 'postType', name: __wprm( 'Post Type' ),
            elem: (
                <RecipePostType
                    slug={ props.recipe.slug }
                    post_status={ props.recipe.post_status }
                    date={ props.recipe.date }
                    post_password={ props.recipe.post_password }
                    post_author={ props.recipe.post_author }
                    language={ props.recipe.language }
                    onRecipeChange={ props.onRecipeChange }
                />
            )
        });
    }

    structure.push({
        id: 'general', name: __wprm( 'General' ),
        elem: (
            <RecipeGeneral
                type={ props.recipe.type }
                name={ props.recipe.name }
                summary={ props.recipe.summary }
                author={{
                    display: props.recipe.author_display,
                    name: props.recipe.author_name,
                    link: props.recipe.author_link,
                }}
                servings={{
                    amount: props.recipe.servings,
                    unit: props.recipe.servings_unit,
                }}
                servings_advanced_enabled={ props.recipe.servings_advanced_enabled }
                servings_advanced={ props.recipe.servings_advanced }
                cost={ props.recipe.cost }
                onRecipeChange={ props.onRecipeChange }
            />
        )
    });
    structure.push({
        id: 'times', name: __wprm( 'Times' ),
        elem: (
            <RecipeTimes
                type={ props.recipe.type }
                prep={ {
                    time: props.recipe.prep_time,
                    zero: props.recipe.prep_time_zero,
                } }
                cook={ {
                    time: props.recipe.cook_time,
                    zero: props.recipe.cook_time_zero,
                } }
                custom={ {
                    time: props.recipe.custom_time,
                    zero: props.recipe.custom_time_zero,
                } }
                customLabel={ props.recipe.custom_time_label }
                total={ {
                    time: props.recipe.total_time,
                    zero: false,
                } }
                onRecipeChange={ props.onRecipeChange }
            />
        )
    });
    structure.push({
        id: 'categories', name: __wprm( 'Categories' ),
        elem: (
            <RecipeCategories
                tags={ props.recipe.tags }
                recipe={ props.recipe }
                onRecipeChange={ props.onRecipeChange }
                openSecondaryModal={ props.openSecondaryModal }
            />
        )
    });
    structure.push({
        id: 'equipment', name: __wprm( 'Equipment' ),
        elem: (
            <RecipeEquipment
                type={ props.recipe.type }
                equipment={ props.recipe.equipment }
                onRecipeChange={ props.onRecipeChange }
                openSecondaryModal={ props.openSecondaryModal }
            />
        )
    });
    structure.push({
        id: 'ingredients',
        name: 'howto' === props.recipe.type ? __wprm( 'Materials' ) : __wprm( 'Ingredients' ),
        elem: (
            <RecipeIngredients
                type={ props.recipe.type }
                ingredients={ props.recipe.ingredients_flat }
                instructions={ props.recipe.instructions_flat }
                linkType={ props.recipe.ingredient_links_type }
                system={ props.recipe.unit_system }
                onRecipeChange={ props.onRecipeChange }
                openSecondaryModal={ props.openSecondaryModal }
                setUids={ props.setUids }
            />
        )
    });
    structure.push({
        id: 'instructions', name: __wprm( 'Instructions' ),
        elem: (
            <RecipeInstructions
                type={ props.recipe.type }
                ingredients={ props.recipe.ingredients_flat }
                instructions={ props.recipe.instructions_flat }
                onRecipeChange={ props.onRecipeChange }
                allowVideo={ hasVideo && 'other' !== props.recipe.type }
                openSecondaryModal={ props.openSecondaryModal }
                setUids={ props.setUids }
            />
        )
    });

    // Only show nutrition for food recipes.
    if ( 'howto' !== props.recipe.type ) {
        let nutritionName = __wprm( 'Nutrition' );
        let nutritionClassName = 'wprm-admin-modal-recipe-quicklink';
        
        if ( nutritionWarning ) {
            nutritionClassName += ' wprm-admin-modal-recipe-quicklink-warning';
            nutritionName = (
                <span style={{ display: 'inline-flex', gap: '5px', alignItems: 'baseline' }}>
                    <Icon type="warning" color="#8B0000" />
                    { __wprm( 'Nutrition' ) }
                </span>
            );
        }

        structure.push({
            id: 'nutrition', 
            name: nutritionName,
            className: nutritionClassName,
            elem: (
                <RecipeNutrition
                    nutrition={ props.recipe.nutrition }
                    servings={{
                        amount: props.recipe.servings,
                        unit: props.recipe.servings_unit,
                    }}
                    ingredients={ props.recipe.ingredients_flat }
                    recipe={ props.recipe }
                    onRecipeChange={ props.onRecipeChange }
                    openSecondaryModal={ props.openSecondaryModal }
                    onWarningChange={ setNutritionWarning }
                />
            )
        });
    }

    // Only show custom fields when available and at least 1 is set.
    if ( wprm_admin_modal.custom_fields && wprm_admin_modal.custom_fields.fields && 0 < Object.keys( wprm_admin_modal.custom_fields.fields ).length ) {
        structure.push({
            id: 'custom-fields', name: __wprm( 'Custom Fields' ),
            elem: (
                <RecipeCustomFields
                    fields={ props.recipe.custom_fields }
                    onFieldChange={( field, value ) => {
                        let newFields = Object.assign({}, JSON.parse( JSON.stringify( props.recipe.custom_fields ) ) );
                        newFields[ field ] = value;

                        props.onRecipeChange({
                            custom_fields: newFields,
                        });
                    }}
                />
            )
        });
    }

    structure.push({
        id: 'notes', name: __wprm( 'Notes' ),
        elem: (
            <RecipeNotes
                notes={ props.recipe.notes }
                onRecipeChange={ props.onRecipeChange }
            />
        )
    });

    return (
        <Fragment>
            <Header
                onCloseModal={ props.onCloseModal }
            >
                {
                    props.loadingRecipe
                    ?
                    __wprm( 'Loading Recipe...' )
                    :
                    <Fragment>
                        {
                            props.recipe.id
                            ?
                            `${ __wprm( 'Editing Recipe' ) } #${props.recipe.id}${props.recipe.name ? ` - ${props.recipe.name}` : ''}`
                            :
                            `${ __wprm( 'Creating new Recipe' ) }${props.recipe.name ? ` - ${props.recipe.name}` : ''}`
                        }
                    </Fragment>
                }
            </Header>
            <div className="wprm-admin-modal-recipe-quicklinks">
                {
                    structure.map((group, index) => (
                        <Link
                            to={ `wprm-admin-modal-fields-group-${ group.id }` }
                            containerId="wprm-admin-modal-recipe-content"
                            className={ group.className || 'wprm-admin-modal-recipe-quicklink' }
                            activeClass="active"
                            spy={true}
                            offset={-10}
                            smooth={true}
                            duration={400}
                            key={index}
                        >
                            { group.name }
                        </Link>
                    ))
                }
            </div>
            <Element className="wprm-admin-modal-content" id="wprm-admin-modal-recipe-content">
                {
                    props.loadingRecipe
                    ?
                    <Loader/>
                    :
                    <form className="wprm-admin-modal-recipe-fields">
                        {
                            structure.map((group, index) => (
                                <FieldGroup
                                    header={ group.name }
                                    id={ group.id }
                                    key={ 100 * props.forceRerender + index }
                                >
                                    { group.elem }
                                </FieldGroup>
                            ))
                        }
                    </form>
                }
            </Element>
            <div id="wprm-admin-modal-toolbar-container"></div>
            {
                'waiting' === props.saveResult
                ?
                <Footer savingChanges={ false }>
                    <CopyToClipboard
                        text={JSON.stringify( props.recipe )}
                        onCopy={(text, result) => {
                            if ( result ) {
                                alert( __wprm( 'The recipe has been copied and can be used in the "Import from JSON" feature.' ) );
                            } else {
                                alert( __wprm( 'Something went wrong. Please contact support.' ) );
                            }
                        }}
                    >
                        <a href="#" onClick={ (e) => { e.preventDefault(); } }>
                            { __wprm( 'This is taking a long time. Maybe something went wrong?' ) } { __wprm( 'Click to copy the recipe to your clipboard.' ) }
                        </a>
                    </CopyToClipboard> <Loader />
                </Footer>
                :
                <Footer
                    savingChanges={ props.savingChanges }
                >
                    {
                        'failed' === props.saveResult
                        &&
                        <CopyToClipboard
                            text={JSON.stringify( props.recipe )}
                            onCopy={(text, result) => {
                                if ( result ) {
                                    alert( __wprm( 'The recipe has been copied and can be used in the "Import from JSON" feature.' ) );
                                } else {
                                    alert( __wprm( 'Something went wrong. Please contact support.' ) );
                                }
                            }}
                        >
                            <a href="#" onClick={ (e) => { e.preventDefault(); } }>
                                { __wprm( 'Something went wrong during saving.' ) } { __wprm( 'Click to copy the recipe to your clipboard.' ) }
                            </a>
                        </CopyToClipboard>
                    }
                    {
                        'ok' === props.saveResult
                        ?
                        <span>{ __wprm( 'Saved successfully' ) }</span>
                        :
                        null
                    }
                    <button
                        className="button"
                        onClick={ () => {
                            Api.utilities.previewRecipe( JSON.stringify( props.recipe ) ).then((previewUrl) => {
                                if ( previewUrl ) {
                                    window.open( previewUrl, '_blank' );
                                } else {
                                    alert( __wprm( 'Something went wrong. The preview could not be loaded.' ) );
                                }
                            });
                        } }
                    >
                        { __wprm( 'Preview' ) }
                    </button>
                    <button
                        className="button button-primary"
                        onClick={ () => {
                            if ( nutritionWarning ) {
                                const confirmed = confirm(
                                    __wprm( 'You have nutrition warnings that indicate changes to ingredients or serving size may require updating the nutrition facts. Are you sure you want to save anyway?' )
                                );
                                if ( ! confirmed ) {
                                    return;
                                }
                            }
                            props.saveRecipe( false );
                        } }
                        disabled={ ! props.changesMade }
                    >
                        { __wprm( 'Save' ) }
                    </button>
                    <button
                        className="button button-primary"
                        onClick={ () => {
                            if ( props.changesMade ) {
                                if ( nutritionWarning ) {
                                    const confirmed = confirm(
                                        __wprm( 'You have nutrition warnings that indicate changes to ingredients or serving size may require updating the nutrition facts. Are you sure you want to save anyway?' )
                                    );
                                    if ( ! confirmed ) {
                                        return;
                                    }
                                }
                                props.saveRecipe( true );
                            } else {
                                props.onCloseModal();
                            }
                        } }
                    >
                        { props.changesMade ? __wprm( 'Save & Close' ) : __wprm( 'Close' ) }
                    </button>
                </Footer>
            }
        </Fragment>
    );
}
export default EditRecipe;const conversionEndpoint = wprmp_admin.endpoints.unit_conversion;

import ApiWrapper from 'Shared/ApiWrapper';

export default {
    get( ingredients, system = 'default' ) {
        const data = {
            ingredients,
            system,
        };

        return ApiWrapper.call( `${conversionEndpoint}`, 'POST', data );
    },    
};
	<div class="wpr-ri-column wpr-ri-not-tracked" data-url="" data-has-credit="0" data-can-add-pages="0" data-post-id="">
		<button 
			type="button"
			class="wpr-ri-test-page "
			data-url=""
			data-post-id=""
					>
			Test the page		</button>
				<div class="wpr-ri-limit-html" style="display: none;">
					</div>

		<div class="wpr-ri-message" style="display: none;"></div>
	</div>
	/**
 * WordPress dependencies
 */
import { Path, SVG } from '@wordpress/components';

export default (
	<SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
	</SVG>
); jQuery(function(e){if("undefined"==typeof wc_orders_params)return!1;var t=function(){e(document).on("click",".post-type-shop_order .wp-list-table tbody td, .woocommerce_page_wc-orders .wp-list-table.orders tbody td",this.onRowClick).on("click",".order-preview:not(.disabled)",this.onPreview)};t.prototype.onRowClick=function(t){if(e(t.target).filter("a, a *, .no-link, .no-link *, button, button *").length)return!0;if(window.getSelection&&window.getSelection().toString().length)return!0;var r=e(this).closest("tr").find("a.order-view").attr("href");r&&r.length&&(t.preventDefault(),t.metaKey||t.ctrlKey?window.open(r,"_blank"):window.location=r)},t.prototype.onPreview=function(){var t=e(this),r=t.data("orderId");return t.data("order-data")?e(this).WCBackboneModal({template:"wc-modal-view-order",variable:t.data("orderData")}):(t.addClass("disabled"),e.ajax({url:wc_orders_params.ajax_url,data:{order_id:r,action:"woocommerce_get_order_details",security:wc_orders_params.preview_nonce},type:"GET",success:function(r){e(".order-preview").removeClass("disabled"),r.success&&(t.data("orderData",r.data),e(this).WCBackboneModal({template:"wc-modal-view-order",variable:r.data}))}})),!1},new t});
<div class="wrap wprm-preview" style="max-width: 500px;">
	<h1>WP Recipe Maker Plugin Preview</h1>
	<p>
		Hi there!
	</p>
	<p>
		Welcome to a live preview of the WP Recipe Maker plugin! We created an example recipe for you and added it to a regular WordPress post. This can give you an idea of how the plugin works and what it looks like.
	</p>
	<p>
		Things you can <strong>check out in this preview</strong>:
	</p>
	<ul style="list-style: disc; margin-left: 23px;">
		<li>Have a <a href="">look at the example post</a> to see what a recipe could look like on your site</li>
		<li>Check out the <a href="https://bellevierwindows.com/wp-admin/admin.php?page=wprm_manage">WP Recipe Maker > Manage page</a>, where you'll find an overview of all recipes and can edit them</li>
	</ul>
	<br/>
	<p>
		If you want to learn even more, check out <a href="https://demo.wprecipemaker.com">our demo site</a> or <a href="https://bootstrapped.ventures/wp-recipe-maker/">WP Recipe Maker homepage</a>. But our best recommendation is to just install WP Recipe Maker on your site and play around with it. There is a ton to discover!
	</p>
</div>

		<!-- in development: -->
	
	<style>
		.ulgrid{display: grid;grid-template-columns: 300px 120px 600px;grid-gap:0;border:1px solid #CCC;margin:10px;padding:10px;margin-bottom:50px;background:#FCFCFC;} 
		.ulgrid li{padding:20px 10px;background:#FFF;list-style:none;margin:0;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;} 
		.ulgrid li:nth-child(3n-2){border-left:1px solid #F5F5F5;}
		.ulgrid li:nth-child(3n){border-right:1px solid #F5F5F5;}
		.ulgrid li:nth-child(6n),.ulgrid li:nth-child(6n-1),.ulgrid li:nth-child(6n-2) {background: #F5F5F5;}
		.correct{color:#0C0;}.attention{color:#C00;}
		.testingonly{border:1px solid #F00;background:#DDD;}
		#feast-audit ol{margin-left:30px;}
	</style>

		<div class="feast-admin-featurebox" style="max-width: 800px; font-size: 18px; line-height: 1.2em; ">
			
			
						
			<h2>Thumbnails</h2>
			<p>Wordpress contains 4 default thumbnails that many themes and plugins rely on. We recommend setting these sizes to match the <a href="https://feastdesignco.com/modern-thumbnails/" target="_blank" rel="noopener noreferer">Feast Modern Thumbnails</a> (opens in new window) - this reduces the number of images that get generated, which consumes fewer image optimization credits in Shortpixel (+Imagify).</p>
			<p>Clicking these settings automatically updates the database settings and can be verified in <a href="/wp-admin/options-media.php">Settings > Media</a>. medium_large is hidden from users.</p>
			<li><a href="https://bellevierwindows.com/wp-admin/admin.php?page=feast-audit&setoption=thumbnail_image_size">Set thumbnail_size=180x180</a></li>
			<li><a href="https://bellevierwindows.com/wp-admin/admin.php?page=feast-audit&setoption=medium_image_size">Set medium_image_size=360x0</a></li>
			<li><a href="https://bellevierwindows.com/wp-admin/admin.php?page=feast-audit&setoption=large_image_size">Set large_image_size=720x0</a></li>
			<li><a href="https://bellevierwindows.com/wp-admin/admin.php?page=feast-audit&setoption=medium_large_image_size">Set medium_large_image_size=1200x0</a></li>
			<p>Note: The "large" is set to match the 720px content width, because the "large" image size is what Wordpress defaults to when inserting new images in the block editor. While "medium_large" sounds like it should be smaller, there's no actual rule that requires this. It doesn't follow standard conventions, but it works in our setup. Setting medium_large to 1200x0 when uploading 1200px width images essentially disables this from being used on most modern images.</p>

			<h2>Miscellaneous</h2>
			<li><a href="https://bellevierwindows.com/wp-admin/admin.php?page=feast-audit&setoption=show_avatars">Set show_avatars=0</a> (disable Gravatar)</li>
			<p>Gravatar is used for the user profile widget and comment avatars, but it loads images from a third-party site, and slows down pagespeed. We recommend not displaying avatars in the comments, and using a <a href="https://feastdesignco.com/how-to/wordpress-themes/genesis-user-profile-widget/#custom-html" target="_blank" rel="noopener noreferer">"Custom HTML" user profile widget for the sidebar</a> (opens in new window).</p>