/**
 * @license
 * Copyright 2020 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.detail',
  name: 'ChoiceSectionDetailView',
  extends: 'foam.u2.detail.AbstractSectionedDetailView',

  requires: [
    'foam.core.ArraySlot',
    'foam.u2.detail.SectionView',
    'foam.u2.view.ChoiceView'
  ],

  css: `
    ^ .foam-u2-view-ScrollTableView table {
      width: 100%;
    }
    ^ .foam-u2-tag-Select {
        text-align-last:center;
      }
    ^ .foam-u2-tag-Select:after {
        text-align-last:center;
      }

    .choicePosition {
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .action-button {
      width: 100px;
      font-size: 20px;
      font-weight: bold;
      padding: 5px;
      border-radius: 10px;
    }
  `,

  properties: [
    {
      name: 'currentIndex',
      preSet: function(o,n) {
        if ( n < 1 ) return 0;
        if ( n >= this.newSections.length ) return this.newSections.length - 1;
        return n;
      },
      value: 0
    },
    {
      name: 'newSections'
    }
  ],

  methods: [
    function initE() {
      var self = this;

      this.SUPER();
      this
        .addClass(this.myClass())
        .add(this.slot(function(sections, data) {
          if ( ! data ) return;

          var arraySlot = foam.core.ArraySlot.create({
            slots: sections.map((s) => s.createIsAvailableFor(self.data$))
          });

          return self.E()
            .add(arraySlot.map((visibilities) => {
              self.newSections = sections.filter((s, i) => {
                return visibilities[i]
              })
              return this.E()
                .startContext({ controllerMode: 'EDIT' })
                  .start().addClass('choicePosition')
                    .start('button').addClass('action-button').add('<').on('click', () => {
                      this.currentIndex -= 1;
                    }).end()
                    .tag(this.ChoiceView, {
                      choices: sections.filter( (s,i) => {
                        return visibilities[i];
                      }).map( (s,i) => [i,s.title] ),
                      data$: self.currentIndex$
                    })
                    .start('button').addClass('action-button').add('>').on('click', () => {
                      this.currentIndex += 1;
                    }).end()
                  .end()
                .endContext()
                  .add(this.slot(function (currentIndex) {
                    return this.E().tag(self.SectionView, {
                            data$: self.data$,
                            section: this.newSections[this.currentIndex],
                            showTitle: true})
                  }))
            }))
        }));
    }
  ]
});

@@ -588,16 +588,18 @@
  %7D%0A%0A    
+  
 .choiceP
@@ -614,26 +614,29 @@
 %7B%0A      
-text-align
+  align-items
 : center
@@ -633,24 +633,26 @@
 ms: center;%0A
+  
       displa
@@ -666,16 +666,18 @@
 ;%0A      
+  
 flex-dir
@@ -689,16 +689,18 @@
 n: row;%0A
+  
       ju
@@ -724,35 +724,36 @@
 nter;%0A      
+ 
-align-items
+ text-align
 : center;%0A  
@@ -750,27 +750,33 @@
 center;%0A    
-%7D%0A%0A
+  %7D%0A  %0A  
     .action-
@@ -790,26 +790,35 @@
 %7B%0A      
-width
+  border-radius
 : 10
-0
 px;%0A    
@@ -815,24 +815,26 @@
 10px;%0A      
+ 
+ 
 font-size: 2
@@ -834,24 +834,26 @@
 size: 20px;%0A
+  
       font-w
@@ -865,16 +865,18 @@
 : bold;%0A
+  
       pa
@@ -893,37 +893,34 @@
 ;%0A      
-border-radius
+  width
 : 10
+0
 px;%0A
+  
     %7D%0A  

remove un use css