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

    core.Sib.register({
      name: "customtzcld-display-community-widget",
      use: [core.StoreMixin],

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

      async populate() {
        this.element.innerHTML = `
        <div class="loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>`;
        let tzcldprofile = {
          contact_first_name: await this.resource.contact_first_name,
          contact_last_name: await this.resource.contact_last_name,
          contact_job: await this.resource.contact_job,
          kind: await this.resource.kind,
          features: await this.resource.features,
          region: await this.resource.region,
          contact_mail_1: await this.resource.contact_mail_1,
          contact_mail_2: await this.resource.contact_mail_2,
          contact_mail_3: await this.resource.contact_mail_3,
          membership: await this.resource.membership,
          last_contribution_year: await this.resource.last_contribution_year
        };
        if("label" in this.element.attributes) {
          for(let ignore of this.element.attributes['label'].value.split(',')) {
            tzcldprofile[ignore.trim()] = null;
          }
        }
        let render = "<div class='border-top margin-medium border-color-grey'></div>";
        if(tzcldprofile.features) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Caractéristiques</span>:&nbsp;${tzcldprofile.features}</div>`;
        }
        if(tzcldprofile.region) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Région / Département</span>:&nbsp;${tzcldprofile.region}</div>`;
        }
        if(tzcldprofile.contact_mail_1) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 1</span>:&nbsp;${tzcldprofile.contact_mail_1}</div>`;
        }
        if(tzcldprofile.contact_mail_2) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 2</span>:&nbsp;${tzcldprofile.contact_mail_2}</div>`;
        }
        if(tzcldprofile.contact_mail_3) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 3</span>:&nbsp;${tzcldprofile.contact_mail_3}</div>`;
        }
        if(tzcldprofile.contact_first_name || tzcldprofile.contact_last_name) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Personne de contact</span>:&nbsp;`;
          if(tzcldprofile.contact_first_name) render += `${tzcldprofile.contact_first_name}`;
          if(tzcldprofile.contact_last_name && tzcldprofile.contact_first_name) render += ` `;
          if(tzcldprofile.contact_last_name) render += `${tzcldprofile.contact_last_name}`;
          render += `</div>`;
        }
        if(tzcldprofile.contact_job) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Poste occupé par le contact</span>:&nbsp;${tzcldprofile.contact_job}</div>`;
        }
        if(tzcldprofile.kind) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Type de territoire</span>:&nbsp;${await tzcldprofile.kind['name']}</div>`;
        }
        if(tzcldprofile.membership) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>:&nbsp;<input type="checkbox" checked disabled /></div>`;
        }
        if(!tzcldprofile.membership) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>:&nbsp;<input type="checkbox" disabled /></div>`;
        }
        if(tzcldprofile.last_contribution_year) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Année dernière cotisation</span>:&nbsp;${tzcldprofile.last_contribution_year}</div>`;
        }
        render += "<div class='border-top margin-medium border-color-grey'></div>";
        this.element.innerHTML = render;
      },
    });

    core.Sib.register({
      name: "customtzcld-display-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 = {
          description: await this.resource.description,
          postal_code: await this.resource.postal_code,
          address: await this.resource.address,
          phone: await this.resource.phone,
          position: await this.resource.position,
          membership: await this.resource.membership,
          last_contribution_year: await this.resource.last_contribution_year,
          events: await this.resource["events.ldp:contains"],
          orgs: await this.resource["orgs.ldp:contains"],
          regions: await this.resource["regions.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='border-top margin-medium border-color-grey'></div>";
        if(tzcldprofile.description) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Description</span>:&nbsp;${tzcldprofile.description}</div>`;
        }
        if(tzcldprofile.regions && tzcldprofile.regions.length > 0) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Région / Département</span>:&nbsp;`;
          for(let region of tzcldprofile.regions) {
            render += `${await region['name']},&nbsp;`;
          }
          render = render.slice(0, -7);
          render += `</div>`;
        }
        if(tzcldprofile.postal_code) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Code postal</span>:&nbsp;${tzcldprofile.postal_code}</div>`;
        }
        if(tzcldprofile.address) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adresse postale</span>:&nbsp;${tzcldprofile.address}</div>`;
        }
        if(tzcldprofile.events && tzcldprofile.events.length > 0) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Évènements marquants</span>:&nbsp;`;
          for(let event of tzcldprofile.events) {
            render += `${await event['name']},&nbsp;`;
          }
          render = render.slice(0, -7);
          render += `</div>`;
        }
        if(tzcldprofile.orgs && tzcldprofile.orgs.length > 0) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Organisation ou Territoire</span>:&nbsp;`;
          for(let org of tzcldprofile.orgs) {
            render += `${await org['name']},&nbsp;`;
          }
          render = render.slice(0, -7);
          render += `</div>`;
        }
        if(tzcldprofile.position) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Poste occupé</span>:&nbsp;${tzcldprofile.position}</div>`;
        }
        if(tzcldprofile.membership) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>:&nbsp;<input type="checkbox" checked disabled /></div>`;
        }
        if(!tzcldprofile.membership) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>:&nbsp;<input type="checkbox" disabled /></div>`;
        }
        if(tzcldprofile.last_contribution_year) {
          render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Année dernière cotisation</span>:&nbsp;${tzcldprofile.last_contribution_year}</div>`;
        }
        render += "<div class='border-top margin-medium border-color-grey'></div>";
        this.element.innerHTML = render;
      },
    });

  });
});