import("./utils.js").then((utils) => {
  import(/* @vite-ignore */utils.coreVersion()).then((core) => {

    core.Sib.register({
      name: "tzcld-point-follow-form",
      use: [core.StoreMixin],

      empty() {
        //console.debug();
        this.element.innerHTML = "";
      },

      async populate() {
        this.element.innerHTML = `
        <div class="loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>`;
        let tzcldprofile = {
          community: await this.resource,

        };


        if("label" in this.element.attributes) {
          for(let ignore of this.element.attributes['label'].value.split(',')) {
            tzcldprofile[ignore.trim()] = null;
          }
        }
        let render = `
        <solid-form solid-resource bind-resources fields="answer" partial
        widget-answer="solid-form-textarea-label"
        ></solid-form>`;
        this.element.innerHTML = render;
      }
});
core.Sib.register({
        name: "follow-answer-question",
        use: [core.StoreMixin],
  
        empty() {
          //console.debug();
          this.element.innerHTML = "";
        },
  
        async populate() {
          this.element.innerHTML = `
          <div class="loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>`;
          let tzcldprofile = {
            answer: await this.resource,

          };


          if("label" in this.element.attributes) {
            for(let ignore of this.element.attributes['label'].value.split(',')) {
              tzcldprofile[ignore.trim()] = null;
            }
          }
          let render = `
            <div class="\${value != "" ? \`not-null\` : \`null\`}">
              <solid-form-textarea name="comment" class="segment auto" value=\${value}">
                <textarea data-holder="" name="comment"><!---->\${value}<!----></textarea>
              </solid-form-textarea>
              <div class="segment full display-comment">
                <div class="segment auto">\${value}</div>
                <div class="search-button segment auto text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall text-right padding-right-xsmall padding-left-xsmall block">
                  <button><!---->Modifier<!----></button>
                </div>
              </div>
            </div>`;
          this.element.innerHTML = render;
        }
});


    core.Sib.register({
      name: "tzcld-follow-points",
      use: [core.StoreMixin],

      empty() {
        //console.debug();
        this.element.innerHTML = "";
      },

      async populate() {
        this.element.innerHTML = `
        <div class="loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>`;
        let tzcldprofile = {
          points: await this.resource["ldp:contains"]
        };
        let communityId = false ;
        let pointsAnswers = false ;
        let PartsPoints = false ;

        let parentContext = utils.findAncestor(this.element, 'tzcld-follow') ;
        if (parentContext) {
          communityId = parentContext.getAttribute('data-src') ;
          pointsAnswers = parentContext.getAttribute('point-answers') ;
          PartsPoints = parentContext.getAttribute('parts-points') ;
        }
    

        let render = ``;
        let i = 0 ;
        
        for(let point of tzcldprofile.points) {
          
            let widget_id = 'follow-answer-form' ;
            render +=  ` <div class="full">
              <solid-form-search 
              id="filter-follow-${utils.getIntId(point['@id'])}-${utils.getIntId(communityId)}" 
              class="hidden"
              fields="followed_point"
              value-followed_point="${point['@id']}"
              naked
              ></solid-form-search>
              <solid-display 
                solid-resource
                fields="@id" 
                filtered-by="filter-follow-${utils.getIntId(point['@id'])}-${utils.getIntId(communityId)}"  
                data-src="${communityId}tzcld_community_followed_answer/" 
                widget-id="${widget_id}"
              ></solid-display>
              </div>`;
          
          
          i++ ;
        }
        this.element.innerHTML = render;
      }
    });

      core.Sib.register({
            name: "tzcld-follow",
            use: [core.StoreMixin],
      
            empty() {
              //console.debug();
              this.element.innerHTML = "";
            },
      
            async populate() {
              
              this.element.innerHTML = `
              <div class="loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>`;
              let tzcldprofile = {
                community: await this.resource,
                name: await this.resource.name,
                parts: await this.element.getAttribute('parts'),
              };

              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = `
          <solid-widget name="follow-answer-form">
            <template>
              <div class="segment full auto-eval-answer">
                <div class="segment full padding-small whitespace-normal">
                  <div class="segment full padding-small padding-bottom-xxsmall text-top whitespace-normal">
                    <solid-display  
                      data-src="\${value}"
                      solid-resource 
                      fields="followed_point.name, div(followed_point.helpComment)"  
                      widget-followed_point.name="h4"
                      widget-div="div"
                    ></solid-display>
                  </div>
                  <div class="segment full padding-small padding-top-xxsmall text-top">
                    <solid-form 
                    solid-resource 
                    fields="answer" 
                    class="form" 
                    data-src="\${value}"
                    widget-answer="solid-form-textarea-label"
                    label-answer=" "
                    class-answer="segment margin-bottom-medium full sm-full padding-right-small sm-padding-none text-small text-semibold text-color-heading whitespace-normal text-xlarge"
                    class-submit-button="hidden"
                    autosave
                    ></solid-form>
                  </div>
                </div>
              </div>
            </template>
          </solid-widget>
          
              <!--<div>${await tzcldprofile.name}</div>-->
              <solid-display 
                solid-resource 
                data-src="${this.element.getAttribute('parts')}" 
                parts-points="${this.element.getAttribute('parts-points')}" 
                fields="segment1(title, followed_part_points)" 
                class="segment full child-accordion"
                multiple-followed_part_points="tzcld-follow-points"
                widget-name="div"
                widget-title="h2"
                class-title="text-xlarge text-xbold text-color-heading padding-large padding-left-small margin-none"
                class-followed_part_points="full block hidden"
                class-segment1="segment block full  margin-bottom-large shadow bg-color-white whitespace-normal"
              ></solid-display>`;

             
              this.element.innerHTML = render;
            }
    });
  });
});