import * as React from 'react';
import { Icon, } from 'office-ui-fabric-react/lib/Icon';

// This should be loaded locally in the project only once
// require('./PropPanelHelp.css');

import { PivotItem, } from 'office-ui-fabric-react/lib/Pivot';

import { defaultBannerCommandStyles, } from "../HelpPanelOnNPM/onNpm/defaults";
import { ISitePreConfigProps, } from './PreConfigFunctions';
require('./PropPanelHelp.css');

const CSSOverRideWarning = <div style={{fontSize: 'large' }}>
  <div className={ 'fps-pph-topic' } style={{fontSize: 'large' }}><mark>NOTICE</mark></div>
  <div>Any 3rd party app that modifies the page styling (like these) are using undocumented tricks </div>
  <div>  - - <b>WHICH ARE SUBJECT TO BREAK without notice by Microsoft</b>.</div>
  <div>These settings are applied after this web part loads.</div>
  <div><b>Users may briefly see the original styling</b>.  Especially if their connection is slow or your page takes a long time to load.</div>
</div>;

const DeveloperWarning = <div style={{fontSize: 'large' }}>
  <div className={ 'fps-pph-topic' } style={{fontSize: 'large' }}><mark>NOTICE</mark></div>
  <div>ONLY turn these on IF you know what you are doing and need them.</div>
</div>;


export const PinMeHelp = <PivotItem headerText={ 'Pin Me' } > 
    <div className={ 'fps-pph-content' }>
    <div className={ 'fps-pph-topic' }>Default Location</div>
    <div>
        <li><b>normal - </b>Web part loads on page where you put it</li>
        <li><b>Pin Expanded - </b>Web part loads Pinned in upper right corner fully expanded</li>
        <li><b>Pin Collapsed - </b>Web part loads Pinned in upper right corner collapsed</li>
    </div>
    <div className={ 'fps-pph-topic' }>Force Pin State</div>
    <div>
        <li><b>Let user change - </b>End user can move the web part from Pinned to Normal location at any time</li>
        <li><b>Enforce no Toggle - </b>End user can not toggle the position of the web part.
        <p>With Enforcing pin, the end user will always be able to expand or collapse the web part.</p>
        <p>Be sure to test experience by loading the page with the browser shrunk to size of a phone.  Consider end user experience trying to navigate your page.</p>
        </li>
    </div>       
    </div>
</PivotItem>;

export const VisitorHelp = <PivotItem headerText={ 'Visitor Help' } > 
    <div className={ 'fps-pph-content' }>
    <div className={ 'fps-pph-topic' }>Full Help Panel Audience</div>
    <div>This gives you control who can see the entire <b>More Information</b> panel in the Help Banner bar.</div>
    <div>People who have less rights than this will only see the content you add via the property pane.</div>

    <div className={ 'fps-pph-topic' }>Panel Description</div>
    <div>Personalized heading message you give you your users.</div>

    <div className={ 'fps-pph-topic' }>Support Message</div>
    <div>Optional message to give users for support.</div>

    <div className={ 'fps-pph-topic' }>Documentation message</div>
    <div>Message you can give users directly above the documentation link</div>

    <div className={ 'fps-pph-topic' }>Paste a Documentation link</div>
    <div>We require a valid SharePoint link where you store further information on using this web part.</div>

    <div className={ 'fps-pph-topic' }>Documentation Description</div>
    <div>Optional text that the user sees as the Documentation Link text</div>

    <div className={ 'fps-pph-topic' }>Support Contacts</div>
    <div>Use of this web part requires a current user to be identified for support issues.</div>

    </div>
</PivotItem>;


export const BannerHelp = <PivotItem headerText={ 'Banner' } > 
    <div className={ 'fps-pph-content' }>
    <div className={ 'fps-pph-topic' } style={{ textDecoration: 'underline' }}>FPS Banner - Basics</div>
    <div className={ 'fps-pph-topic' }>Show Banner</div>
    <div>May allow you to hide the banner.  If toggle disabled, it is required.</div>

    <div className={ 'fps-pph-topic' }>Optional Web Part Title</div>
    <div>Add Title text to the web part banner.</div>
    <div>Depending on the web part, this may not be editable.</div>

    <div className={ 'fps-pph-topic' }>More Info text-button</div>
    <div>Customize the More Information text/Icon in the right of the banner.</div>

    <div className={ 'fps-pph-topic' } style={{ textDecoration: 'underline' }}>FPS Banner - Navigation</div>
    <div className={ 'fps-pph-topic' }>Show 'Go to Home Page' <Icon iconName='Home'/> Icon</div>
    <div>Displays the <Icon iconName='Home' style={ defaultBannerCommandStyles }/> when you are not on the site's home page.</div>

    <div className={ 'fps-pph-topic' }>Show 'Go to Parent Site' <Icon iconName='Up'/> Icon</div>
    <div>Displays the <Icon iconName='Up' style={ defaultBannerCommandStyles }/> when you are not on the site's home page.</div>

    <div className={ 'fps-pph-topic' }>Gear, Go to Home, Parent audience</div>
    <div>Minimum permissions requied to see the Home and Parent site icons.</div>
    <div>Use this to hide buttons from visitors if your ALV Financial Manual Web part is more of a single page app and you want to hide the site from a typical visitor.</div>
    <div>NOTE:  Site Admins will always see the icons.</div>
    <ul>
        <li>Site Owners: have manageWeb permissions</li>
        <li>Page Editors: have addAndCustomizePages permissions</li>
        <li>Item Editors: have addListItems permissions</li>
    </ul>
    
    
    

    <div className={ 'fps-pph-topic' } style={{ textDecoration: 'underline' }}>Theme options</div>
    <div><mark><b>NOTE:</b></mark> May be required depending on our policy for this web part</div>
    <div>Use dropdown to change your theme for the banner (color, buttons, text)</div>

    <div className={ 'fps-pph-topic' }>Banner Hover Effect</div>
    <div>Turns on or off the Mouse Hover effect.  If Toggle is off, the banner does not 'Fade In'.  Turn off if you want a solid color banner all the time.</div>

    </div>
</PivotItem>;


export const FPSBasicHelp = <PivotItem headerText={ 'FPS Basic' } > 
    <div className={ 'fps-pph-content' }>

    { CSSOverRideWarning }

    <div className={ 'fps-pph-topic' }>Hide Quick Launch</div>
    <div>As of April 2022, MSFT allows you to modify quick launch in Site Gear 'Change the look'</div>
    <div>Only use this option if you want the Quick launch on the site as a whole but not on the page this web part is installed on.</div>
    
    <div className={ 'fps-pph-topic' }>All Sections <b>Max Width</b> Toggle and slider</div>
    <div>Over-rides out of the box max width on page sections.</div>

    <div className={ 'fps-pph-topic' }>All Sections <b>Margin</b> Toggle and slider</div>
    <div>Over-rides out of the box top and bottom section margin.</div>

    <div className={ 'fps-pph-topic' }>Hide Toolbar - while viewing</div>
    <div>Hidden:  Will hide the page toolbar (Edit button) when loading the page.</div>
    <div><b>Only use if you know what you are doing :)</b></div>
    <div><mark>WARNING</mark>.  <b>Add ?tool=true to the Url</b> and reload the page in order to edit the page.  You <b>CAN NOT SEE THESE INSTRUCTIONS</b> unless you add ?tool=true to the page</div>

    </div>
</PivotItem>;

export const FPSExpandHelp = <PivotItem headerText={ 'FPS Expand' } > 
    <div className={ 'fps-pph-content' }>

    { CSSOverRideWarning }

    <div className={ 'fps-pph-topic' }><b></b>Enable Expandoramic Mode</div>
    <div><b></b>Enables the Expandoramic toggle (diagonal arrow icon in upper left of Header.</div>

    <div className={ 'fps-pph-topic' }><b></b>Page load default</div>
    <div><b></b>Determines the format when loading the page.</div>
    <ul>
        <li>Normal:  Webpart DOES NOT AUTO expand when loading the page</li>
        <li>Expanded:  Page loads with webpart expanded</li>
        <li>Whenever you 'Edit' the page, you may need to manually shrink webpart to see the page and webpart properties.</li>
    </ul>

    <div className={ 'fps-pph-topic' }><b></b>Expandoramic Audience</div>
    <div><b>NOTE:</b> Site Admins will always see all icons regardless of the Toggles or the audience.</div>
    <ul>
        <li>Site Owners: have manageWeb permissions</li>
        <li>Page Editors: have addAndCustomizePages permissions</li>
        <li>Item Editors: have addListItems permissions</li>
    </ul>

    <div className={ 'fps-pph-topic' }><b>Style options and Hover Effect</b> are for SharePoint IT use only.</div>
    <div><b></b></div>

    <div className={ 'fps-pph-topic' }>Padding</div>
    <div>Adjusts the padding around the webpart.  20px minimum.</div>

    </div>
</PivotItem>;

export const SinglePageAppHelp = <PivotItem headerText={ 'Single Page Apps' } > 
    <div className={ 'fps-pph-content' }>

    <div className={ 'fps-pph-topic' }>Before you start!</div>

    <div className={ 'fps-pph-topic' }>If you plan to build a full page app (Full expand web part at load time)</div>
    <div>
        Be sure to follow these steps to improve performance and minimize any styling issues and delays:
        <ol>
        <li>Create a page from 'Apps' Template when you first create a page</li>
        <ul>
            <li>This will remove all navigation from the page, make the web part full page and load faster.</li>
        </ul>

        <li>IF NOT, then Start with a <b>Communication Site</b></li>
        <ul>
            <li>This is the only site that allows true 'Full Width webparts'</li>
        </ul>
        <li><b>Clear the home page completely</b> (do not have any other webparts)</li>
        <li>Minimize what SharePoint loads
        <ol style={{ listStyleType: 'lower-alpha' }}>
            <li>Go to Gear</li>
            <li>Click 'Change the look'</li>
            <li>Click Header
            <ul>
            <li>Set Layout to minimal</li>
            <li>Set 'Site title visiblity' to off</li>
            <li>Remove your site logo</li>
            <li>Save Header settings</li>
            </ul></li>
            <li>Click Navigation
            <ul>
            <li>Turn off Site Navigation</li>
            </ul></li>
        </ol></li>
        <li>Add SecureScript in the first Full Width section</li>
        </ol>
    </div>
    </div>
</PivotItem>;

export const ImportHelp = <PivotItem headerText={ 'Import' } > 
    <div className={ 'fps-pph-content' }>
        <div className={ 'fps-pph-topic' }>If Available in this web part...</div>
        <div>It allows you to paste in values from the same webpart from a different page.</div>
        <div>To Export web part settings</div>
        <ol>
        <li>Click on 'More Information' in the Web Part Banner</li>
        <li>Click the Export tab <Icon iconName='Export' style={ defaultBannerCommandStyles }/> (last tab in the Help Panel)</li>
        <li>Hover over Export Properties row</li>
        <li>Click the blue paper/arrow icon on the right side of the row to 'Export' the properties</li>
        <li>Edit this page and web part</li>
        <li>Paste properties into the Import properties box</li>
        </ol>

    </div>
</PivotItem>;

/**
 * 2022-08-29:  Refactored return statement to fix compile warning.
* @param sitePresets : ISitePreConfigProps
 * @returns 
 */
export function SitePresetsInfo ( sitePresets : ISitePreConfigProps ) {

    const usePreSets = sitePresets && ( sitePresets.forces.length > 0 || sitePresets.presets.length > 0 ) ? true : false;

    if ( usePreSets === true ) {

      const allForces: string[] = [];

      const forcesRows: any[] = [];
      let forcePreviously : any = null;
      sitePresets.forces.map ( ( preset, index ) => {
        if ( index === 0 || sitePresets.forces[ index ].source !== sitePresets.forces[ index -1 ].source ) {
          forcesRows.push( <tr className={ 'fps-policy' } style={ { color: 'darkred' } }><td colSpan={2}>{ preset.source }</td><td colSpan={2}>{ preset.location }</td></tr> ) ;
        }
        let wasForced : string = '';
        let wasForcedClass = wasForced ? 'was-forced' : '';
        if ( allForces.indexOf( preset.prop ) > -1 ) { 
          wasForced =  '*';
          forcePreviously = <div>* These items were previously enforced</div>;
        } else { allForces.push( preset.prop ); }

        forcesRows.push( <tr className={preset.className}><td>{preset.prop}</td><td title={ `for sites: ${preset.location}`}>{preset.type}</td><td className={ wasForcedClass }>{preset.status}{wasForced}</td><td>{JSON.stringify(preset.value) } </td></tr> ) ;
      });

      const forces = sitePresets.forces.length === 0 ? null : <div>
        <div className={ 'fps-pph-topic' }>Forced Properties - may seem editable but are auto-set.</div>
        <div className={ '' }>In the case a property is forced multiple times, the last one is the one that gets applied.</div>
        { forcePreviously }
        <table className='configured-props'>
          { forcesRows }
          {/* { sitePresets.forces.map ( ( preset, index ) => {
            return <tr className={preset.className}><td>{preset.prop}</td><td title={ `for sites: ${preset.location}`}>{preset.type}</td><td>{preset.status}</td><td>{JSON.stringify(preset.value) } </td></tr>;
          }) } */}
        </table>
      </div>;

      const presetsRows: any[] = [];
      const alreadyEnforced: string[] = [];
      sitePresets.presets.map ( ( preset, index ) => {
        if ( index === 0 || sitePresets.presets[ index ].source !== sitePresets.presets[ index -1 ].source ) {
          presetsRows.push( <tr className={ 'fps-policy' } style={ { color: 'darkgreen' } }><td colSpan={2}>{ preset.source }</td><td colSpan={2}>{ preset.location }</td></tr> ) ;
        }
        let wasForced : string = '';
        if ( allForces.indexOf( preset.prop ) > -1 && alreadyEnforced.indexOf( preset.prop ) < 0 ) { alreadyEnforced.push( preset.prop ); wasForced =  '^'; }
        let wasForcedClass = wasForced ? 'was-forced' : '';
        presetsRows.push( <tr className={preset.className}><td>{preset.prop}</td><td title={ `for sites: ${preset.location}`}>{preset.type}</td><td className={ wasForcedClass }>{preset.status}{wasForced}</td><td>{JSON.stringify(preset.value) } </td></tr> ) ;
      });

      const alreadyEnforcedStr = alreadyEnforced.join('; ' );
      const presets = sitePresets.presets.length === 0 ? null : <div>
        <div className={ 'fps-pph-topic' }>Preset Properties</div>
        <div className={ '' }>These presets were over-written by the forced policies listed above:</div>
        <div className={ '' }>In the case a property is preset multiple times, the last one is the one that gets applied.</div>
        <div className={ 'width90' }>{ alreadyEnforcedStr }</div>
        <table className='configured-props'>
          { presetsRows }
          {/* { sitePresets.presets.map ( ( preset, index )  => {
            return <tr className={preset.className}><td>{preset.prop}</td><td title={ `for sites: ${preset.location}`}>{preset.type}</td><td>{preset.status}</td><td>{JSON.stringify(preset.value) } </td></tr>;
          }) } */}
        </table>

      </div>;

      const preSetsContent: JSX.Element  = <div  className={ 'fps-pph-content' } style={{ display: 'flex' }}>
        <div>
          { forces }
          { presets }
        </div>
      </div>;

     return preSetsContent;

    } else {

      return null;
    }

}