import { LitElement, html, css, svg, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { Nonprofit, ChangeSearchBar } from "./change-search-bar";
import "./change-search-bar";
import "./change-donation-form";

@customElement("change-drop-in")
export class ChangeDropIn extends LitElement {
  @property({ type: Array, attribute: "featured-nonprofits" })
  featuredNonprofitIds = [];
  @property({ type: String, attribute: "public-key" }) publicKey?: string;
  @property() title: string = "Support a cause";

  @state() featuredNonprofits: Nonprofit[] = [];
  @state() view: "featured" | "cause" = "featured";
  @state() selectedNonprofit?: Nonprofit;

  @query("change-search-bar") changeSearchBar!: ChangeSearchBar;

  constructor() {
    super();
    this.addEventListener("select-nonprofit", ((e: CustomEvent) => {
      this.handleSelectNonprofit(e.detail as Nonprofit);
      this.changeSearchBar.clear();
    }) as EventListener);
  }

  firstUpdated() {
    fetchNonprofits(this.featuredNonprofitIds).then(
      (nonprofits) => (this.featuredNonprofits = nonprofits.slice(0, 4))
    );
  }

  render() {
    return html`
      <div id="container">
        <h1>${this.title}</h1>
        <change-search-bar></change-search-bar>
        ${this.view === "featured"
          ? this.renderFeaturedGrid()
          : this.renderCause()}
      </div>
    `;
  }

  renderFeaturedGrid() {
    return html`
      <div id="featured-grid">
        ${this.featuredNonprofits.map(
          (nonprofit) => html`
            <button
              class="featured-nonprofit"
              @click=${() => this.handleSelectNonprofit(nonprofit)}
            >
              <div class="top-bar">
                <img src=${nonprofit.icon_url} />
                <div>
                  <div class="name">
                    ${postFixWithNonbreakingSpace(
                      nonprofit.name,
                      html`<span class="arrow">${backIcon()}</span>`
                    )}
                  </div>
                  <div class="category">${nonprofit.category}</div>
                </div>
              </div>
              <div class="description">${nonprofit.description}</div>
            </button>
          `
        )}
      </div>
    `;
  }

  renderCause() {
    return html`
      <div id="cause-view">
        <div>
          <button @click=${() => (this.view = "featured")} id="back-button">
            ${backIcon()} Back
          </button>
          <div class="top-bar">
            <img src=${ifDefined(this.selectedNonprofit?.icon_url)} />
            <div>
              <div class="name">${this.selectedNonprofit?.name}</div>
              <div class="category">${this.selectedNonprofit?.category}</div>
            </div>
          </div>
          <div class="title">Mission</div>
          <div class="">${this.selectedNonprofit?.description}</div>
          <div class="title">ein</div>
          <div class="">
            ${this.selectedNonprofit?.ein.slice(
              0,
              2
            )}-${this.selectedNonprofit?.ein.slice(2)}
          </div>
        </div>
        <change-donation-form
          solana
          .publicKey=${this.publicKey}
          .nonprofitId=${this.selectedNonprofit?.id}
        ></change-donation-form>
      </div>
    `;
  }

  private handleSelectNonprofit(nonprofit: Nonprofit) {
    this.selectedNonprofit = nonprofit;
    this.view = "cause";
  }

  static styles = css`
    :host {
      display: block;
      max-width: 800px;
      font-family: sans-serif;
      background-color: var(--background-color, #f7f9fa);
      color: var(--color, black);
      padding: 1em;
    }
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    change-search-bar {
      width: 100%;
    }
    #featured-grid {
      display: flex;
      flex-wrap: wrap;
      width: 40em;
      max-width: 100%;
      margin-top: 1em;
    }

    .featured-nonprofit {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.04);
      border-radius: 1em;
      padding: 1em;
      background-color: var(--card-background-color, white);
      flex: 1;
      min-width: 15em;
      max-width: 100%;
      margin: 1em;
      text-align: left;
    }
    .featured-nonprofit .arrow {
      display: inline-block;
      opacity: 0;
      transform: translateX(-0.1em);
      transition: all 0.1s ease-out;
    }
    .featured-nonprofit:hover .arrow {
      opacity: 1;
      transform: translateX(0);
    }
    .featured-nonprofit .arrow svg {
      line-height: 0;
      height: 0.9em;
      width: 0.9em;
      top: 2px;
      vertical-align: -2px;
      transform: rotate(180deg);
    }
    .top-bar {
      display: flex;
      align-items: center;
      margin-bottom: 1em;
    }
    .top-bar > img {
      width: 3em;
      margin-right: 1em;
      border-radius: 50%;
      align-self: center;
    }
    .top-bar > div {
      flex: 1;
    }
    .name {
      font-weight: 700;
      margin-bottom: 0.2em;
    }
    .category {
      color: #aaa;
    }

    #cause-view {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 1em;
    }
    #cause-view > div {
      padding: 1.5em;
      flex: 1;
      min-width: 15em;
    }
    #back-button {
      display: flex;
      align-items: center;
      color: var(--detail-color, #999);
      margin-bottom: 1em;
    }
    #back-button svg {
      margin-right: 0.2em;
    }
    #cause-view .title {
      text-transform: uppercase;
      font-size: 0.8em;
      font-weight: 700;
      color: var(--detail-color, #999);
      margin-top: 2em;
      margin-bottom: 0.2em;
    }
    change-donation-form {
      --background-color: var(--card-background-color, white);
      border-radius: 1em;
      flex: 1;
    }

    button {
      font-size: inherit;
      color: inherit;
      border: none;
      cursor: pointer;
      background: none;
    }
  `;
}

async function fetchNonprofits(ids: string[]) {
  const params = new URLSearchParams();
  for (const id of ids) {
    params.append("ids[]", id);
  }
  return fetch(
    `https://api.getchange.io/api/v1/nonprofit_basics?${params.toString()}`
  )
    .then((response) => response.json())
    .then((response) => response.nonprofits as Nonprofit[]);
}

function backIcon() {
  return svg`
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M16.62 2.99c-.49-.49-1.28-.49-1.77 0L6.54 11.3c-.39.39-.39 1.02 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"/></svg>
  `;
}

function postFixWithNonbreakingSpace(phrase: string, item: TemplateResult) {
  const words = phrase.split(" ");
  const allButFirst = words.slice(0, words.length - 1);
  const last = words[words.length - 1];
  // The extra <span> ensures the space between all but the first and the last word
  // doesn't get minified out in the production build.
  return html`${allButFirst.join(" ")}
    <span> </span>
    <div style="white-space: nowrap; display: inline-block;">
      ${last} ${item}
    </div>`;
}