text: import { h, Component, createRef } from '/js/web_modules/preact.js';
  import htm from '/js/web_modules/htm.js';
  const html = htm.bind(h);
  
  import { setLocalStorage } from '../../utils/helpers.js';
  import {
    KEY_USERNAME,
    KEY_CUSTOM_USERNAME_SET,
  } from '../../utils/constants.js';
  
  export default class UsernameForm extends Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        displayForm: false,
        isFocused: false,
      };
  
      this.textInput = createRef();
  
      this.handleKeydown = this.handleKeydown.bind(this);
      this.handleDisplayForm = this.handleDisplayForm.bind(this);
      this.handleHideForm = this.handleHideForm.bind(this);
      this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
      this.handleFocus = this.handleFocus.bind(this);
      this.handleBlur = this.handleBlur.bind(this);
    }
  
    handleDisplayForm() {
      const { displayForm: curDisplay } = this.state;
      this.setState({
        displayForm: !curDisplay,
      });
    }
  
    handleHideForm() {
      this.setState({
        displayForm: false,
      });
    }
  
    handleKeydown(event) {
      if (event.keyCode === 13) {
        // enter
        this.handleUpdateUsername();
      } else if (event.keyCode === 27) {
        // esc
        this.handleHideForm();
      }
    }
  
    handleUpdateUsername() {
      const { username: curName, onUsernameChange } = this.props;
      let newName = this.textInput.current.value;
      newName = newName.trim();
      if (newName !== '' && newName !== curName) {
        setLocalStorage(KEY_USERNAME, newName);
        // So we know that the user has set a custom name
        setLocalStorage(KEY_CUSTOM_USERNAME_SET, true);
        if (onUsernameChange) {
          onUsernameChange(newName);
        }
        this.handleHideForm();
      }
    }
  
    handleFocus() {
      const { onFocus } = this.props;
      if (onFocus) {
        onFocus();
      }
    }
  
    handleBlur() {
      const { onBlur } = this.props;
      if (onBlur) {
        onBlur();
      }
    }
  
    render(props, state) {
      const { username, isModerator } = props;
      const { displayForm } = state;
  
      const styles = {
        info: {
          display: displayForm ? 'none' : 'flex',
        },
        form: {
          display: displayForm ? 'flex' : 'none',
        },
      };
  
      const moderatorFlag = html`
        <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
      `;
  
      return html`
        <div id="user-info" class="whitespace-nowrap">
          <div
            id="user-info-display"
            style=${styles.info}
            title="Click to update user name"
            class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75"
            onClick=${this.handleDisplayForm}
          >
            <span
              id="username-display"
              class="text-indigo-100 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
              'moderator-flag'}"
              >${isModerator && moderatorFlag}${username}</span
            >
          </div>
  
          <div
            id="user-info-change"
            class="flex flex-row flex-no-wrap p-1 items-center justify-end"
            style=${styles.form}
          >
            <input
              type="text"
              id="username-change-input"
              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
              maxlength="60"
              placeholder="Update username"
              defaultValue=${username}
              onKeydown=${this.handleKeydown}
              onFocus=${this.handleFocus}
              onBlur=${this.handleBlur}
              ref=${this.textInput}
            />
            <button
              id="button-update-username"
              onClick=${this.handleUpdateUsername}
              type="button"
              class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn"
            >
              Update
            </button>
  
            <button
              id="button-cancel-change"
              onClick=${this.handleHideForm}
              type="button"
              class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50"
              title="cancel"
            >
              X
            </button>
          </div>
        </div>
      `;
    }
  }
  