import * as utils from "@helpers";
import { msg } from "@lit/localize";
import { Task } from "@lit/task";
import type { PropertiesPicker } from "@src/tems";
import { html, nothing, unsafeCSS, css } from "lit";
import { customElement, property, state } from "lit/decorators.js";

import type { RegisterOrganisation } from "@src/tems";

import "~icons/heroicons-outline/arrow-down";
import OrganisationApprovalStyle from "@styles/orbit/organisation/tems-organisation-approval.scss?inline";

@customElement("solid-tems-organisation-approval")
export class OrganisationApproval extends utils.OrbitComponent {
  @property({ attribute: "header", type: String })
  header?: string = "Organisation approval";

  @state() sortBy = "";
  @state() sortDir?: "asc" | "desc";

  cherryPickedProperties: PropertiesPicker[] = [
    { key: "@id", value: "@id" },
    { key: "organisation", value: "organisation" },
    { key: "organisationAddress", value: "organisationAddress" },
    {
      key: "organisationRegistrationNumber",
      value: "organisationRegistrationNumber",
    },
    { key: "firstname", value: "firstname" },
    { key: "lastname", value: "lastname" },
    { key: "status", value: "status" },
  ];
  static styles = css`
    ${unsafeCSS(OrganisationApprovalStyle)}
  `;

  _getResource = new Task(this, {
    task: async ([dataSrc]) => {
      if (
        !dataSrc ||
        !this.orbit ||
        (!this.noRouter &&
          this.route &&
          !this.route.startsWith(this.currentRoute))
      )
        return;
      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
        this.datas = await this._getProxyValue(dataSrc);
        this.hasCachedDatas = true;
      }

      if (this.oldDataSrc !== dataSrc) {
        this.oldDataSrc = dataSrc;
      }
      return this.datas;
    },
    args: () => [this.dataSrc, this.caching, this.currentRoute],
  });

  _rotateSort(prop: string) {
    if (this.sortBy === prop) {
      if (this.sortDir === "asc") {
        this.sortDir = "desc";
      } else if (this.sortDir === "desc") {
        this.sortBy = "";
        this.sortDir = undefined;
      } else {
        this.sortDir = "asc";
      }
    } else {
      this.sortBy = prop;
      this.sortDir = "asc";
    }
  }

  async _updateOrganisationStatus(org: RegisterOrganisation, status: string) {
    org.status = status;
    await window.sibStore.patch(org, org["@id"]);
    this.requestUpdate();
  }

  _renderRows(sortedData: RegisterOrganisation[]) {
    return sortedData.map(
      (d) => html`<tr>
        <td>${d.organisation}</td>
        <td>${d.organisationAddress}</td>
        <td>${d.organisationRegistrationNumber}</td>
        <td>${d.firstname}</td>
        <td>${d.lastname}</td>
        <td>
          ${d.status === "pending"
            ? html`<tems-badge
                type="warning"
                size="sm"
                label="${d.status}"
              ></tems-badge>`
            : d.status === "approved"
            ? html`<tems-badge
                type="success"
                size="sm"
                label="${d.status}"
              ></tems-badge>`
            : html`<tems-badge
                type="error"
                size="sm"
                label="${d.status}"
              ></tems-badge>`}
        </td>
        <td class="">
          <div class="ctas flex flex-row  align-items-center">
            ${d.status === "pending"
              ? html`<tems-button
                    label="${msg("Reject")}"
                    type="outline-color"
                    size="sm"
                    @click=${() =>
                      this._updateOrganisationStatus(d, "rejected")}
                  ></tems-button>

                  <tems-button
                    label="${msg("Approve")}"
                    type="primary"
                    size="sm"
                    @click=${() =>
                      this._updateOrganisationStatus(d, "approved")}
                  ></tems-button>`
              : nothing}
          </div>
        </td>
      </tr> `
    );
  }

  render() {
    return (
      this.gatekeeper() ||
      this._getResource.render({
        pending: () => html`<solid-loader></solid-loader>`,
        complete: (datas) => {
          if (!datas) {
            return nothing;
          }
          // avoid error when no value in data
          for (const data of datas) {
            if (!data[this.sortBy]) {
              data[this.sortBy] = ""
            }
          }
          const sortedData = this.sortBy
            ? utils.sort([...datas], this.sortBy, this.sortDir)
            : [...datas];

          return html`<tems-viewport>
            <tems-header slot="header" heading="${this.header}"></tems-header>
            <div slot="content">
              <table class="full-width">
                <thead>
                  <tr>
                    <th
                      @click=${() => this._rotateSort("organisation")}
                      class="${this.sortBy === "organisation"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("Organisation")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>

                    <th
                      @click=${() => this._rotateSort("organisationAddress")}
                      class="${this.sortBy === "organisationAddress"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("Address")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>
                    <th
                      @click=${() =>
                        this._rotateSort("organisationRegistrationNumber")}
                      class="${this.sortBy === "organisationRegistrationNumber"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("Registration number")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>

                    <th
                      @click=${() => this._rotateSort("firstname")}
                      class="${this.sortBy === "firstname"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("First name")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>
                    <th
                      @click=${() => this._rotateSort("lastname")}
                      class="${this.sortBy === "lastname"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("Last name")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>

                    <th
                      @click=${() => this._rotateSort("status")}
                      class="${this.sortBy === "status"
                        ? `sort-${this.sortDir}`
                        : nothing}"
                    >
                      ${msg("Current status")}
                      <icon-heroicons-outline-arrow-down></icon-heroicons-outline-arrow-down>
                    </th>
                    <th>
                      ${msg("Set status")}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  ${this._renderRows(sortedData)}
                </tbody>
              </table>
            </div>
          </tems-viewport>`;
        },
      })
    );
  }
}