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

        core.Sib.register({
            name: "tzcld-circle-members-display",
            use: [core.StoreMixin],
      
            empty() {
              //console.debug();
              this.element.innerHTML = "";
            },
      
            async populate() {
              this.element.innerHTML = `
              <div class="tzcld-circle-members-display-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>`;
              let tzcldprofile = {
                id: await this.resource['@id'],
              };
              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="tzcld-orbit-circle-team-contact">
              <template>
                <solid-link class="icon icon-secondary hover icon-info margin-left-xsmall margin-right-xxsmall" data-src="\${value}" next="members-member-profile"></solid-link>
                <solid-link class="icon icon-secondary hover icon-speech margin-left-xxsmall margin-right-medium" data-src="\${value}" next="messages"></solid-link>
              </template>
            </solid-widget>
            <solid-widget name="tzcld-orbit-circle-members-list">
              <template>
                <solid-display class="segment full labelled-avatar two-lines whitespace-normal children children-full sm-children-full children-margin-bottom-medium circle-members"
                  data-src="\${src || value}"
                  array-field='user_set'
                  loader-id='tzcld-circle-members-display-loader'
                  fields='segment1(account.picture), segment2(line1(name), line2(tzcld_profile.jobs)), @id'

                  class-segment1='segment'
                  class-account.picture='avatar-tzcld'

                  class-segment2='segment three-quarter margin-left-xsmall'
                  class-line1='segment block'
                  class-name='text-small text-semibold text-color-heading text-sub'
                  class-id='user-actions'
                  class-line2='segment block'
                  class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
                  class-communities='full'

                  multiple-communities
                  multiple-communities-fields='name'

                  widget-id='tzcld-orbit-circle-team-contact'
                  widget-account.picture='orbit-user-avatar'
                  widget-tzcld_profile.jobs='customtzcld-display-user-profile-first-jobs'
                  
                ></solid-display>
              </template>
            </solid-widget>
            <solid-display
              data-src="${tzcldprofile.id}"
              bind-resources
              fields='members'
              widget-members='tzcld-orbit-circle-members-list'
              loader-id='tzcld-circle-members-display-loader'
            ></solid-display>`;
             
              this.element.innerHTML = render;
            },
        });
        core.Sib.register({
            name: "customtzcld-display-user-profile-phones",
            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 = {
                phones: 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 phone of tzcldprofile.phones) {
                render +=  `<div class="phone">${await phone.phone} ${await phone.phone_type}</div>`;
              }
             
              this.element.innerHTML = render;
            },
        });
        core.Sib.register({
            name: "customtzcld-display-user-profile-emails",
            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 = {
                emails: 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 email of tzcldprofile.emails) {
                render +=  `<div class="email"><a class="link" href="mailto:${await email.email}">${await email.email}</a> ${await email.email_type}</div>`;
              }
             
              this.element.innerHTML = render;
            },
        });

        core.Sib.register({
            name: "customtzcld-display-user-profile-jobs",
            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 = {
                jobs: 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-top-small margin-bottom-small">`;
            for(let job of tzcldprofile.jobs) {
                if(await job.organisation !="") {
                    if(await job.link !="") {
                        render +=  `<h3 class="position text-medium padding-bottom-large">${await job.position} à <a class="link text-top" href="${await job.link}">${await job.organisation}</a></h3>`;
                    } else {
                        render +=  `<h3 class="position text-medium padding-bottom-large">${await job.position} à ${await job.organisation}</h3>`;
                    }
                } else {
                    render +=  `<h3 class="position text-medium padding-bottom-large">${await job.position}</h3>`;
                }

                render +=  `<div class="address padding-bottom-small">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>`;
                if ((await job.mobile_phone != '') || (await job.phone != '')) {
                    render +=  `<div class="phone padding-bottom-small">`;
                }
                
                if (await job.mobile_phone != '') {
                    render +=  `${await job.phone}`;
                }
                if ((await job.mobile_phone != '') && (await job.phone != '')) {
                    render +=  ` - `;
                }
                if (await job.mobile_phone != '') {
                    render +=  `${await job.mobile_phone}`;
                }
                if ((await job.mobile_phone != '') || (await job.phone != '')) {
                    render +=  `</div>`;
                }
                
                if (await job.email != '') {
                    render +=  `<div class="email padding-bottom-small"><a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>`;
                }
            
            }
            
            render +=  `</div>`;
            
            this.element.innerHTML = render;
            },
        });
    });
});