// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=395-7819&m=dev

import { localized, msg } from "@lit/localize";
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property, state } from "lit/decorators.js";

import SearchBarStyle from "@styles/forms/search/tems-search-bar.scss?inline";

import "~icons/mingcute/layout-grid-line";
import "~icons/mingcute/settings-6-line";
import "~icons/mingcute/layout-4-line";
import "~icons/mingcute/save-2-line";
import "~icons/mingcute/map-line";

export type TemsSearchBarProps = {
  displaySavedSearch: boolean;
  displayFilters: boolean;
  displayViews: boolean;
  dropdownCardElement: boolean;
  dropdownListElement: boolean;
  dropdownTableElement: boolean;
  dropdownMapElement: boolean;
  displayActiveTags: boolean;
  view: "card" | "list" | "table" | "map";
};

@customElement("tems-search-bar")
@localized()
export class TemsSearchBar extends LitElement {
  static styles = css`
    ${unsafeCSS(SearchBarStyle)}
  `;

  @property({ attribute: "display-filters", type: Boolean })
  displayFilters: TemsSearchBarProps["displayFilters"] = false;

  @property({ attribute: "display-saved-search", type: Boolean })
  displaySavedSearch: TemsSearchBarProps["displaySavedSearch"] = false;

  @property({ attribute: "display-views", type: Boolean })
  displayViews: TemsSearchBarProps["displayViews"] = false;

  @state()
  view: TemsSearchBarProps["view"] = "card";

  @property({ attribute: "display-dropdown-card", type: Boolean })
  dropdownCardElement: TemsSearchBarProps["dropdownCardElement"] = true;

  @property({ attribute: "display-dropdown-list", type: Boolean })
  dropdownListElement: TemsSearchBarProps["dropdownListElement"] = true;

  @property({ attribute: "display-dropdown-table", type: Boolean })
  dropdownTableElement: TemsSearchBarProps["dropdownTableElement"] = true;

  @property({ attribute: "display-dropdown-map", type: Boolean })
  dropdownMapElement: TemsSearchBarProps["dropdownMapElement"] = true;

  @property({ attribute: "display-active-tags", type: Boolean })
  displayActiveTags: TemsSearchBarProps["displayActiveTags"] = false;

  @state()
  openedDropdown = false;

  @state()
  value = "";

  _updateOpenedStatus(e: Event) {
    e.preventDefault();
    this.openedDropdown = true;
  }

  _displayFilters() {
    this.dispatchEvent(new CustomEvent("toggle-filters"));
  }

  _toggleChangeView(e: Event) {
    e.preventDefault();
    this.dispatchEvent(
      new CustomEvent("change-view", {
        detail: e.target?.getAttribute("target"),
      }),
    );
    this.openedDropdown = false;
  }

  _search(e: Event) {
    e.preventDefault();
    this.dispatchEvent(
      new CustomEvent("search", {
        detail: e.detail?.value,
      }),
    );
  }

  render() {
    return html`<div class="search-bar">
      <div class="search-input">
        <tems-input type="search" placeholder=${msg("Search for...")} @change=${this._search} value=${this.value}></tems-input>
      </div>
      ${
        this.displayViews &&
        (
          this.dropdownCardElement ||
            this.dropdownListElement ||
            this.dropdownTableElement ||
            this.dropdownMapElement
        )
          ? html`<div>
            <tems-dropdown label=${msg("Views")} @opened=${this._updateOpenedStatus} .open=${this.openedDropdown}>
              ${
                this.dropdownCardElement
                  ? html`<tems-dropdown-item
                    @click=${this._toggleChangeView}
                    .icon=${html`<icon-mingcute-layout-grid-line></icon-mingcute-layout-grid-line>`}
                    label=${msg("Card")}
                    target="card"
                    active=${this.view === "card" || nothing}
                  ></tems-dropdown-item>`
                  : nothing
              }
              ${
                this.dropdownListElement
                  ? html`<tems-dropdown-item
                    @click=${this._toggleChangeView}
                    .icon=${html`<icon-mingcute-layout-4-line></icon-mingcute-layout-4-line>`}
                    label=${msg("List")}
                    target="list"
                    active=${this.view === "list" || nothing}
                  ></tems-dropdown-item>`
                  : nothing
              }
              ${
                this.dropdownTableElement
                  ? html`<tems-dropdown-item
                    @click=${this._toggleChangeView}
                    .icon=${html`<icon-mingcute-layout-grid-line></icon-mingcute-layout-grid-line>`}
                    label=${msg("Table")}
                    target="table"
                    active=${this.view === "table" || nothing}
                    disabled=""
                  ></tems-dropdown-item>`
                  : nothing
              }
              ${
                this.dropdownMapElement
                  ? html`<tems-dropdown-item
                    @click=${this._toggleChangeView}
                    .icon=${html`<icon-mingcute-map-line></icon-mingcute-map-line>`}
                    label=${msg("Map")}
                    target="map"
                    active=${this.view === "map" || nothing}
                    disabled=""
                  ></tems-dropdown-item>`
                  : nothing
              }
            </tems-dropdown>
          </div>`
          : nothing
      }
      ${
        this.displayFilters
          ? html`<div>
            <tems-button
              @click=${this._displayFilters}
              label=${msg("Filters")}
              size="md"
              type="outline-gray"
              .iconRight=${html`<icon-mingcute-settings-6-line></icon-mingcute-settings-6-line>`}
            ></tems-button>
          </div>`
          : nothing
      }
      ${
        this.displaySavedSearch
          ? html`<div>
            <tems-button
              label=${msg("Saved Search")}
              size="md"
              type="outline-gray"
              disabled
              .iconRight=${html`<icon-mingcute-save-2-line></icon-mingcute-save-2-line>`}
            ></tems-button>
          </div>`
          : nothing
      }

      <!-- Active tags here -->
      ${
        this.displayActiveTags
          ? html`<div class="active-tags"><slot></slot></div>`
          : nothing
      }
    </div>`;
  }
}