import("./utils.js").then((utils) => {
    import(utils.coreVersion()).then((core) => {

        core.Sib.register({
            name: "customtzcld-display-user-territories",
            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
              };
              let tzcld_profile = {
                resource: await tzcldprofile.community.tzcld_profile
              };
              let region = await tzcld_profile.resource.region ;
              let step_state = await tzcld_profile.resource.step_state ;
              let kind = await tzcld_profile.resource.kind ;
              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = ``;
              let html_region  = '' ;
              let html_step_state  = '' ;
              let html_kind  = '' ;
              if (region) {
                html_region  =  `<div class="region segment tag color-fourth">${await region.name}</div>`;
              }
              if (step_state) {
                html_step_state  =  `<div class="region segment tag color-fourth">${await step_state.name}</div>`;
              }
              if (kind) {
                html_kind  =  `<div class="region segment tag color-fourth">${await kind.name}</div>`;
              }
              
              render +=  `<div class="territoires-mini-card-2 segment full shadow margin-top-small">
                <div class="segment width-25 padding-small padding-top-medium">
                  <solid-display class="segment full" label-logo="" fields="logo" class-logo="segment full" widget-logo="tzcld-communities-logo" data-src="${await tzcldprofile.community['@id']}" solid-resource=""></solid-display>
                </div>
                <div class="segment width-75 padding-large border-left border-color-grey">
                  <div class="community-card-2 segment full">
                    <h4 class="text-xlarge text-semibold text-color-secondary margin-top-xxsmall margin-bottom-xsmall whitespace-normal">${await tzcldprofile.community.name}</h4>
                    <div>${html_region + html_step_state + html_kind }</div>
                  </div>
                </div>
                <div class="links"><solid-link class="icon icon-secondary hover icon-info margin-top-small margin-right-small" data-src="${await tzcldprofile.community['@id']}" next="communities-community-profile"></solid-link></div>
              </div>`;
              this.element.innerHTML = render;
            },
        });
    
        core.Sib.register({
          name: "customtzcld-display-territory-profile-locations",
          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 = {
              locations: await this.resource["ldp:contains"]
          };
          if("label" in this.element.attributes) {
              for(let ignore of this.element.attributes['label'].value.split(',')) {
              tzcldprofile[ignore.trim()] = null;
              }
          }
          let render = `<div class="segment full margin-bottom-xxlarge">`;
          for(let job of tzcldprofile.locations) {
              let phones = await job.phones ;
              let emails = await job.emails ;

              render +=  `<div class="segment half padding-left-xxlarge padding-right-xxlarge margin-top-xxlarge margin-bottom-none">`;
              if(await job.name !="") {
                  render +=  `<h3 class="position text-medium text-color-secondary text-xlarge margin-top-none">${await job.name}</h3>`;
              } else {

              }
              render +=  `<div class="full address padding-bottom-small">
              <div class="segment icontz-mdi_map-marker icon-third text-xxlarge text-top padding-right-xsmall"></div>
              <div class="segment width-90">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>
              </div>`;
              if (await phones.getLdpContains().length > 0) {
                  render +=  `<div class="full phone padding-bottom-small">
                  <div class="segment icontz-ic_call icon-third text-xxlarge text-top padding-right-xsmall"></div>
                  <solid-display class="segment width-90" bind-resources="" fields="phones"
                    widget-phones="customtzcld-display-user-profile-phones"
                    data-src="${await job}" solid-resource=""></solid-display>
                  </div>`;
              }

              if (await emails.getLdpContains().length > 0 ) {
                render +=  `<div class="full email padding-bottom-small">
                <div class="segment icontz-mdi_email-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
                <solid-display class="segment width-90" bind-resources="" fields="emails"
                  widget-emails="customtzcld-display-user-profile-emails"
                  data-src="${await job}" solid-resource=""></solid-display>
                </div>`;
              }

              render +=  `</div>`;
          
          }
          
          render +=  `</div>`;
          
          this.element.innerHTML = render;
          },
      });

    core.Sib.register({
            name: "customtzcld-display-territory-regions",
            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 = {
                regions: await this.resource["ldp:contains"]
              };
              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = ``;
              for(let region of tzcldprofile.regions) {
                render +=  `<div class="region segment tag color-fourth">${await region.name}</div>`;
              }
             
              this.element.innerHTML = render;
            },
        });

    core.Sib.register({
      name: "customtzcld-display-territory-profile-widget",
      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 = {
          id: await this.resource['@id'],
          name: await this.resource.name,
          profile: await this.resource.profile,
          tzcld_profile: await this.resource.tzcld_profile
        };
        let etiquettes = {
          kind: await tzcldprofile.tzcld_profile.kind,
          step_state: await tzcldprofile.tzcld_profile.step_state,
          locations: await this.locations
        };
        let primaryContact = {
          resource: await tzcldprofile.tzcld_profile.primary_contact
        };
        let user_infos = null ;
        if ((await primaryContact.resource !== null) && (await primaryContact.resource.user !== undefined)) {
            user_infos = await primaryContact.resource.user ;
        }
        

        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="communities-profile-linkedin-territory">
            <template>
              \${value != "" ? \`<a class="segment children-link-rounded children-icon-social-linkedin children-link-reversed color-secondary bordered margin-right-medium" href="\${value}" target="_blank"><span></span></a>\` : ""}
            </template>
          </solid-widget>
          <solid-widget name="communities-profile-instagram-territory">
            <template>
              \${value != "" ? \`<a class="segment children-link-rounded children-icon-social-instagram children-link-reversed color-secondary bordered" href="\${value}" target="_blank"><span></span></a>\` : ""}
            </template>
          </solid-widget>
          <solid-widget name="communities-profile-facebook-territory">
            <template>
              \${value != "" ? \`<a class="segment children-link-rounded children-icon-social-facebook children-link-reversed color-secondary bordered margin-right-medium" href="\${value}" target="_blank"><span></span></a>\` : ""}
            </template>
          </solid-widget>
          <solid-widget name="communities-profile-twitter-territory">
            <template>
              \${value != "" ? \`<a class="segment children-link-rounded children-icon-social-twitter children-link-reversed color-secondary bordered margin-right-medium" href="\${value}" target="_blank"><span></span></a>\` : ""}
            </template>
          </solid-widget>

          <solid-widget name="communities-logo-custom">
            <template>
              <div class="communities-logo">
                \${value != "" ? \`<div \style="background-image:url(\${value});" />\` : \`<div></div>\`}
              </div>
            </template>
          </solid-widget>
        <h2 class="text-color-heading text-bold text-xxxlarge text-letter-spacing-large margin-top-none">Vue publique</h2>
        <div id="tzcld-territory-profile-wrapper" class="tzcld-territory-profile-wrapper segment full shadow bg-color-white">
          <div class="tzcld-user-profile-col1 segment width-30 padding-right-60">
            <div class="section-avatar padding-small padding-bottom-large text-center">
              <solid-display
                class="segment full community-profile-logo"
                bind-resources=""
                label-logo=""
                fields="logo"
                class-logo="xlarge text-center"
                widget-logo="communities-logo-custom"
                data-src="${tzcldprofile.id}"
              ></solid-display>
            </div>
          </div>
          <div class="tzcld-territory-profile-col2 segment width-70">`;
            render += `<div class="segment width-60 margin-top-small text-xxlarge text-semibold text-color-secondary text-cleft">${tzcldprofile.name}</div>`;
          
            render += `<div class="segment width-40 margin-top-small text-xlarge text-semibold text-color-secondary text-right padding-right-xlarge">
<solid-display class="segment" bind-resources="" nested-field="profile" fields="tweeter, facebook, linkedin, instagram"
          widget-linkedin="communities-profile-linkedin-territory"
          widget-facebook="communities-profile-facebook-territory"
          widget-tweeter="communities-profile-twitter-territory"
          widget-instagram="communities-profile-instagram-territory"
          data-src="${tzcldprofile.id}" solid-resource=""></solid-display>

            </div>`;

          render += `<div class="margin-top-xxsmall">
            <solid-display class="segment" bind-resources="" nested-field="tzcld_profile" fields="regions"     widget-regions="customtzcld-display-territory-regions" data-src="${tzcldprofile.id}" solid-resource=""></solid-display>`;
          if (await etiquettes.kind != null) {
          render += `<div class="region segment tag color-fourth">${await etiquettes.kind.name}</div>`;
          }
          
          if (await etiquettes.step_state != null) {
          render += `<div class="region segment tag color-fourth">${await etiquettes.step_state.name}</div>`;
          }
          render += `</div>`;

          if (await tzcldprofile.profile.website != '') {
          render += `<div class="margin-top-small"><a class="text-color-primary" href="${await tzcldprofile.profile.website}">${await tzcldprofile.profile.website}</a></div>`;
          }
          if (await tzcldprofile.profile.description != '') {
          render += `<div class="description margin-top-small white-space-normal">${await tzcldprofile.profile.description}</div>`;
          }
          
          
        render += `</div>
      </div>` ;//tzcld-territory-profile-wrapper

        
        render += `<div id="tzcld-territory-profile-wrapper2" class="tzcld-territory-profile-wrapper2 segment full margin-top-large whitespace-normal">`; 

        render += `<div class="tzcld-territory-profile-primary-contact segment third padding-right-large sm-full">

        
        ` ;
        if ((await primaryContact.resource !== null) && (await primaryContact.resource.user !== undefined)) { 
        render += `<div id="loaderfirst-contact-territory" class="loader loader-top" hidden="">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            
            <solid-display 

            loader-id="loaderfirst-contact-territory" 
            data-src="${await user_infos['@id']}"
            fields="title, segment1(send, view, segment2(member-picture(account.picture), segment3(name, member-pseudo(at, username), profile.job)), segment5(tzcld_profile.jobs), segment6(tzcld_profile.regions))" 
            value-title="Premier contact"
            widget-title="h2"
            class-title="tzcld-h2"
            class-segment1="segment bg-color-white shadow full text-top whitespace-normal" 
            class-segment2="segment full padding-medium padding-bottom-xxsmall text-center whitespace-normal" 
            class-segment3="segment three-quarter whitespace-normal" 
            class-member-picture="segment avatar-wrapper" 
            class-account.picture="avatar large" 
            class-name="segment block margin-top-xsmall margin-bottom-xxsmall text-xlarge text-bold text-color-heading whitespace-normal" 
            class-member-pseudo="hidden" 
            class-username="text-small" 
            class-profile.job="hidden" 
            action-send="messages" 
            action-view="members-member-profile" 
            label-send="" 
            link-text-send=""
            value-send="" 
            label-view=""
            link-text-view="" 
            value-view="" 
            class-send="send-display children-link-rounded children-icon-speech children-link-reversed color-primary bordered"
            class-view="view-display children-link-rounded children-icon-info children-link-reversed color-primary bordered"
            value-at="@" 
            widget-account.picture="orbit-user-avatar" 
            role="button" 
            tabindex="0" 
            widget-tzcld_profile.regions="customtzcld-display-territory-regions" 
            widget-tzcld_profile.jobs="customtzcld-display-user-profile-first-job-short" 
            class-segment5="segment full padding-medium padding-top-xxsmall padding-bottom-xxsmall text-center whitespace-normal" 
            class-segment6="segment full padding-medium padding-top-xxsmall text-center whitespace-normal" 
            next="members-member-profile"
            solid-resource=""></solid-display>`; 

        } else {
          render += `<h2 class="tzcld-h2">Contact pricipal</h2>
          <div class="segment bg-color-white shadow full text-top whitespace-normal">
            <p class="padding-xxlarge">Contact pricipal non désigné</p>
          </div>`; 
        }
        render += `</div>`; 
        render += `<div class="tzcld-territory-profile-ebe segment two-third sm-full">
        <h2 class="tzcld-h2">Informations de contact</h2>
        <div class="col-2-wrapper segment full shadow  bg-color-white">`; 

          

        render += `<solid-display class="segment full" bind-resources="" nested-field="tzcld_profile" fields="locations" widget-locations="customtzcld-display-territory-profile-locations" class-locations="display-ebes" data-src="${tzcldprofile.id}" solid-resource=""  paginate-by="10"></solid-display>`;

        render += `</div>
        
        
        <h2 class="tzcld-h2">Autres contacts</h2>
        <div id="loader-all-contact-territory" class="loader loader-top" hidden="">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
         </div>
         <solid-form-search
         class="hidden"
         id="tzcld-secondary-contacts-filter-${utils.getIntId(tzcldprofile.id)}"
         nested-field="members" 
         fields="is_admin"
         value-is_admin=false
         submit-button="Rechercher" 
         submit-widget="button" 
         naked=""
      ></solid-form-search>
      
        <solid-display 
        filtered-by="tzcld-secondary-contacts-filter-${utils.getIntId(tzcldprofile.id)}"
        empty-value="Pas de contact"
        empty-widget="tzcld-generic-no-result-info"
        loader-id="loader-all-contact-territory" 
        class="segment full children children-half sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall  children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry counter pagination tzcld-other-contacts-list" 
        data-src="${tzcldprofile.id}" 
        nested-field="members" 
        fields="segment1(segment2(member-picture(user.account.picture)), segment3(user.name, segment5(user.tzcld_profile.jobs)), user)"
        class-segment1="segment bg-color-white shadow full text-top whitespace-normal" 
        class-segment2="segment quarter md-full padding-medium text-center whitespace-normal" 
        class-segment3="segment three-quarter md-full padding-top-xxsmall padding-left-small padding-right-small padding-bottom-small whitespace-normal" 
        class-segment5="segment full padding-none padding-top-xsmall text-left whitespace-normal" 
        class-member-picture="segment avatar-wrapper" 
        class-user.account.picture="avatar medium" 
        class-user.name="block margin-top-xsmall margin-bottom-xxsmall text-xlarge text-bold text-color-heading whitespace-normal"
        class-user="user-actions"
        
        widget-user.account.picture="orbit-user-avatar" 
        widget-user.name="h3"
        widget-user.tzcld_profile.jobs="customtzcld-display-user-profile-first-job-short" 
        widget-user="tzcld-orbit-territory-team-contact-actions"
        
        solid-resource=""  paginate-by="20"></solid-display>
        
        </div>`; //col 2

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