(function() { 'use strict';

  const { registerPlugin } = wp.plugins;
  const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
  const { __ } = wp.i18n;
  const { PanelBody, TextControl, ToggleControl, SelectControl  } = wp.components;
  const { withSelect, withDispatch } = wp.data;
  const { compose } = wp.compose;

  //------- Meta box Fields --------
  const PageMetaFields = ({ postType, postMeta, setPostMeta }) => {
    if ('page' !== postType) return null;
    return (
      <>
        <PanelBody
          title={__('Header Options', 'lifttruck')}
          icon=""
          initialOpen={true}
        >
          <SelectControl
            label="Header Settings"
            value={postMeta.wd_custom_header_options}
            options={[
              { label: 'Use Default', value: 'default' },
              { label: 'Use Custom', value: 'custom' }
            ]}
            onChange={(value) => setPostMeta({ wd_custom_header_options: value })}
            __nextHasNoMarginBottom
          />
          
          { postMeta.wd_custom_header_options == 'custom' && (
              <ToggleControl
                label={__('Enable Sticky Header', 'lifttruck')}
                onChange={(value) => setPostMeta({ wd_sticky_header: value })}
                checked={postMeta.wd_sticky_header}
              />)
            } 

          { postMeta.wd_custom_header_options == 'custom' && (
              <ToggleControl
              label={__('Enable Transparent Header', 'lifttruck')}
              onChange={(value) => setPostMeta({ wd_transparent_header: value })}
              checked={postMeta.wd_transparent_header}
            />)
            }

          { (postMeta.wd_custom_header_options == 'custom' && postMeta.wd_transparent_header) && (
              <ToggleControl
              label={__('Enable Header Cap', 'lifttruck')}
              onChange={(value) => setPostMeta({ wd_header_cap: value })}
              checked={postMeta.wd_header_cap}
            />)
            }

        </PanelBody>
      </>
    );
  }
  //---- compose / save metabox ----------
  const EnhancedPageMetaFields = compose(
    withSelect((select) => {
      return {
        postMeta: select('core/editor').getEditedPostAttribute('meta'),
        postType: select('core/editor').getCurrentPostType(),
      };
    }),
    withDispatch((dispatch) => {
      return {
        setPostMeta(newMeta) {
          dispatch('core/editor').editPost({ meta: newMeta });
        }
      };
    })
  )(PageMetaFields);

  //--------- register plugin ---
  registerPlugin('lifttruck-page-sidebar', {
    icon: 'admin-post',
    render: () => (
      <>
        <PluginSidebarMoreMenuItem target="lifttruck-page-sidebar">
          {__('LiftTruck Page Options', 'lifttruck')}
        </PluginSidebarMoreMenuItem>
        <PluginSidebar name="lifttruck-page-sidebar" title={__('Page Options', 'lifttruck')}>
          <EnhancedPageMetaFields />
        </PluginSidebar>
      </>
    ),
  });

} )();