(function (blocks, editor, components, i18n, element, data) {

  var el = wp.element.createElement
  var registerBlockType = wp.blocks.registerBlockType
  var withSelect = wp.data.withSelect
  var InspectorControls = wp.editor.InspectorControls 
  var ColorPicker = wp.components.ColorPicker
  var ColorPalette = wp.components.ColorPalette


  registerBlockType( 'gutenberg-extend/posts-block', {
      title: 'Latest Post',
      icon: 'megaphone',
      category: 'gutenberg-extend',
      attributes: {
        order:  {  type: 'string',  default : 'date/desc'  },
        TitleColor: {  type: 'string',  default : '#067390'  },
        boxColor: {  type: 'string',  default : '#fff'  },
      },
      

      edit: withSelect( function(select) {         
       
        return {
            posts: select( 'core' ).getEntityRecords( 'postType', 'post',{
              per_page: 5
            }),
            categoriesList: select( 'core' ).getEntityRecords( 'taxonomy', 'category' )
        };


      } )( function( props ) {
          var attributes = props.attributes
          var categoriesList = props.categoriesList
          var order = props.attributes.order
          var TitleColor = props.attributes.TitleColor
          var boxColor = props.attributes.boxColor
          

          if ( ! props.posts || ! categoriesList) {
              return i18n.__( 'Loading...' );
          }
          if ( props.posts.length === 0 ) {
              return i18n.__( 'No posts' );
          }
          var className = props.className;
          var post = props.posts;
  
          return [ 

            el(
              'div',
              { className: 'post-list',style:{backgroundColor:boxColor}},
                el(                  
                  'ul',
                  { },
                  post.map(function(getPosts) {               

                    return el(                  
                        'li',
                        { },
                        el(
                          'a', 
                          { className: className, href: getPosts.link,style:{color:TitleColor}},
                          getPosts.title.rendered
                      )
                    )
                  })
              )
            ),

            el(InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
              
                el( components.PanelBody, {
                    title: i18n.__('Latest Post Settings'),
                    className: 'block-latest-post-settings',
                    initialOpen: false
                  },

                  el('p', {}, i18n.__('Add Title Color.')),

                  el(ColorPalette, {
                    colors: [ { name: i18n.__( 'Red' ), color: '#f00' }, { name: i18n.__( 'White' ), color: '#fff' }, {  name: i18n.__( 'Blue' ), color: '#167cef' } ],     
                    value: TitleColor,   
                    onChange: function (TitleColorvalue) {
                     props.setAttributes({ TitleColor: TitleColorvalue })
                    }
                  }),
                  el('p', {}, i18n.__('Add Box Background Color.')),
                  el(ColorPalette, {
                    colors: [ { name: i18n.__( 'Red' ), color: '#f00' }, { name: i18n.__( 'White' ), color: '#fff' }, {  name: i18n.__( 'Blue' ), color: '#167cef' } ],     
                    value: boxColor,   
                    onChange: function (boxColorvalue) {
                     props.setAttributes({ boxColor: boxColorvalue })
                    }
                  }),

                )

          ), // End of Inspector Panel
        ]

      } ),

      save: function() {
          // Rendering in PHP
          return null;
      },
  } );
  

})(
  window.wp.blocks,
  window.wp.editor,
  window.wp.components,
  window.wp.i18n,
  window.wp.element,
  window.wp.data
)