window.SupportPage = React.createClass({

    render: function () {


        var support_space = null;
        var support_warning = null;

        if(gon.has_support) {
            var display = 'Unknown'
            for (var plan in gon.global.subscription_codes) {
                if ( gon.global.subscription_codes[plan].id == gon.plan_code ) {
                    display = gon.global.subscription_codes[plan].name
                }
            }

            // You just need to add '&disable[fieldName]=true' or '&disable[custom_field][fieldName]=true' depending on whether the field is default or custom.
            
            var src = `https://jamkazam.freshdesk.com/widgets/feedback_widget/new?&helpdesk_ticket[requester]=${encodeURIComponent(gon.email)}&disable[requester]=true&helpdesk_ticket[custom_field][cf_plan_1596882]=${encodeURIComponent(display)}&disable[custom_field][cf_plan_1596882]=true&widgetType=embedded&formTitle=JamKazam+Support&submitTitle=Send+Feedback&submitThanks=Thank+you+for+your+message.+We+will+use+our+best+efforts+to+reply+within+24+hours.`

            // helpdesk_ticket_cf_plan_1596882

            support_space = <div className="buffer"><iframe title="Get Help Form" class="freshwidget-embedded-form" id="freshwidget-embedded-form" src={src} scrolling="no" height="650px" width="100%" frameBorder="0" >
            </iframe></div>
        }
        else {
            if(gon.in_trial) {
                support_space=<div className="support-warning">The functionality on this page is disabled because you are currently in the free trial period and are not eligible for support.<br/><br/>You can <a href="/client#/account/subscription">change your plan</a> here.</div>
            }
            else {
                support_space=<div className="support-warning">The functionality on this page is disabled because you must have a Platinum or Gold plan to use support.<br/><br/>You can <a href="/client#/account/subscription">change your plan</a> here.</div>
            }
        }

        var response = <div>
            <div id="header">
                <a href="/client#/home" className="logo-holder"><span id="help-desk">Help Desk</span></a>
            </div>
            <div id="top-container">
                {support_warning}
                <div className="description">
                    The JamKazam help desk offers 1:1 help desk support only to our Gold and Platinum plan
                    subscribers. More information on subscription plans <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-"
                       target="_blank">can be found here</a>. If you are not a Gold or Platinum subscriber,
                    we'd suggest that you look for help in our <a href="https://jamkazam.freshdesk.com/support/home" target="_blank"> extensive knowledge base of
                        help articles</a>,
                    or check out our <a href="https://forum.jamkazam.com/" target="_blank">user forum</a> to see if
                    other JamKazam users can help you.
                </div>

                {support_space}

            </div>
        </div>
        return response
    }
})