/* This file is part of Ezra Bible App.

   Copyright (C) 2019 - 2023 Ezra Bible App Development Team <contact@ezrabibleapp.net>

   Ezra Bible App is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 2 of the License, or
   (at your option) any later version.

   Ezra Bible App is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with Ezra Bible App. See the file LICENSE.
   If not, see <http://www.gnu.org/licenses/>. */

const eventController = require('../../controllers/event_controller.js');
const { html } = require('../../helpers/ezra_helper.js');

const template = html`

<!-- FONT AWESOME STYLES -->
<link rel="preload" href="node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" as="font" type="font/woff2">
<link href="node_modules/@fortawesome/fontawesome-free/css/solid.min.css" rel="stylesheet" type="text/css" />
<link href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css" rel="stylesheet" type="text/css" />

<!-- JQUERY STYLES -->
<link id="theme-css" href="css/jquery-ui/cupertino/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />

<link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />

<style>
  :host {
    display: inline-block;
  }

  #text-field {
    width: 115%;
  }

  #input {
    border: 1px solid lightgray;
    border-radius: 4px;
    padding-right: 1.8em;
    width: 65%;
  }

  #delete-button {
    position: relative;
    right: 25px;
    color: var(--button-color);
  }

  #delete-button:hover {
    color: var(--accent-color);
    cursor: pointer;
  }

</style>
 
<div id="text-field">
  <input type="text" id="input" inputmode="search" />
  <i id="delete-button" class="fa-solid fa-delete-left"></i>
</div>
`;

/**
 * The TextField component <text-field></text-field> is a more fancy version of the standard html input element.
 * It adds some styling as well as a delete button that can be used to delete the content of the text field.
 */
class TextField extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.input = this.shadowRoot.getElementById('input');
    this.deleteButton = this.shadowRoot.getElementById('delete-button');

    this.deleteButton.addEventListener('click', () => {
      this.input.value = '';
      this.dispatchEvent(new KeyboardEvent('keyup'));
      this.input.focus();
    });
  }

  connectedCallback() {
    eventController.subscribe('on-theme-changed', (theme) => {
      if (theme == 'dark') {
        uiHelper.switchToDarkTheme(this.shadowRoot, 'text-field');
      } else {
        uiHelper.switchToRegularTheme(this.shadowRoot, 'text-field');
      }
    });
  }

  set value(value) {
    this.input.value = value;
  }

  get value() {
    return this.input.value;
  }
  
  select() {
    this.input.select();
  }
}

customElements.define('text-field', TextField);
module.exports = TextField;