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;	<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>
(()=>{"use strict";var e={};function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function n(e,t,n){return(t=function(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}();const r="email",i="phone",o="name",l={[r]:["email","e-mail","mail","email address"],[i]:["phone","tel","mobile","cell","telephone","phone number"],[o]:["name","full-name","full name","full_name","fullname","first-name","first name","first_name","firstname","last-name","last name","last_name","lastname","given-name","given name","given_name","givenname","family-name","family name","family_name","familyname","fname","lname","first","last","your-name","your name"]};function a(e){return e&&"string"==typeof e?e.trim().toLowerCase():""}function u(e){const t=a(e),n=t.lastIndexOf("@");if(-1===n)return t;const r=t.slice(n+1);if(["gmail.com","googlemail.com"].includes(r)){const e=t.slice(0,n).replace(/\./g,"");return"".concat(e,"@").concat(r)}return t}function c(e){const t=a(e),n=t.replace(/\D/g,"");return t.startsWith("+")?"+".concat(n):n}function s(e){const r=e.filter(e=>{let{type:t}=e;return t===o}).map(e=>{let{value:t}=e;return a(t)}).filter(Boolean);if(!r.length)return;const[i,...l]=1===r.length?r[0].split(" "):r;return function(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?t(Object(i),!0).forEach(function(t){n(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({first_name:i},(null==l?void 0:l.length)>0?{last_name:l.join(" ")}:{})}function f(e){var t;return null===(t=e.find(e=>{let{type:t}=e;return t===r}))||void 0===t?void 0:t.value}function m(e){var t;return null===(t=e.find(e=>{let{type:t}=e;return t===i}))||void 0===t?void 0:t.value}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function v(e,t,n){return(t=function(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}e.g.document.addEventListener("wpcf7mailsent",t=>{var n,y,b;const g=(null===(n=e.g._googlesitekit)||void 0===n?void 0:n.gtagUserData)?function(e){if(!(e&&e instanceof HTMLFormElement))return;const t=new FormData(e);return function(e){const t=[["address",s(e)],["email",f(e)],["phone_number",m(e)]].filter(e=>{let[,t]=e;return t});if(0!==t.length)return Object.fromEntries(t)}(Array.from(t.entries()).map(t=>{var n;let[s,f]=t;const m=e.querySelector("[name='".concat(s,"']")),p=null==m?void 0:m.type;return"hidden"===p||"submit"===p?null:function(e){let{type:t,name:n,value:s,label:f}=e||{};switch(t=a(t),n=a(n),s=a(s),f=function(e){return e&&"string"==typeof e?e.trim().toLowerCase().replace(/\s*\*+\s*$/,"").replace(/\s*\(required\)\s*$/i,"").replace(/\s*:\s*$/,"").trim():""}(f),t){case"email":return{type:r,value:u(s)};case"tel":return{type:i,value:c(s)}}return function(e){if(!e)return!1;const t=u(e);return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)}(s)||l[r].includes(n)||l[r].includes(f)?{type:r,value:u(s)}:l[i].includes(n)||l[i].includes(f)?{type:i,value:c(s)}:l[o].includes(n)||l[o].includes(f)?{type:o,value:a(s)}:function(e){if(!e)return!1;if(!function(e){const t=e.replace(/\D/g,"");return!(t.length<7||t.length<e.length/2)&&/^[\s\-()+.\d]*$/.test(e)}(e))return!1;const t=c(e);if(!/^\+?\d{7,}$/.test(t))return!1;const n=/[\s\-()+.]/.test(e),r=e.trim().startsWith("+");return!(!n&&!r)}(s)?{type:i,value:c(s)}:null}({type:p,label:null!=m&&m.id?null===(n=e.querySelector("label[for='".concat(null==m?void 0:m.id,"']")))||void 0===n?void 0:n.textContent:void 0,name:s,value:f})}).filter(Boolean))}(t.target):null;null===(y=e.g._googlesitekit)||void 0===y||null===(b=y.gtagEvent)||void 0===b||b.call(y,"contact",function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach(function(t){v(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({event_category:t.detail.contactFormId,event_label:t.detail.unitTag},g?{user_data:g}:{}))})})();