import { html, nothing } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'

import { TailwindElement } from '@/shared/tailwind-element'
import { customClassMap } from '@/shared/directives'

@customElement('lukso-input')
export class LuksoInput extends TailwindElement {
  @property({ type: String })
  value = ''

  @property({ type: String })
  name = ''

  @property({ type: String })
  type = 'text'

  @property({ type: String })
  placeholder = ''

  @property({ type: String })
  label = ''

  @property({ type: String })
  description = ''

  @property({ type: String })
  error = ''

  @property({ type: String })
  unit = ''

  @property({ type: Boolean, attribute: 'is-full-width' })
  isFullWidth = false

  @property({ type: Boolean })
  autofocus = false

  @property({ type: Number })
  max: number | undefined = undefined

  @property({ type: Number })
  min: number | undefined = undefined

  @state()
  private hasHocus = false

  @state()
  private hasHighlight = false

  private defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
    border border-solid h-[48px] placeholder:text-neutral-70
    outline-none transition transition-all duration-150 appearance-none`

  private defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative
    border border-solid h-[48px] transition transition-all duration-150
    rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
    before:w-[1px] before:h-[24px] whitespace-nowrap`

  inputTemplate() {
    return html`
      <input
        data-testid="input"
        id=${this.name}
        name=${this.name}
        type=${this.type as any}
        value=${this.value}
        placeholder=${this.placeholder}
        ?autofocus=${this.autofocus}
        min=${this.min}
        max=${this.max}
        class=${customClassMap({
          [this.defaultInputStyles]: true,
          [this.error === '' ? 'border-neutral-90' : 'border-red-85']:
            !this.hasHighlight,
          [this.error === '' ? 'border-neutral-35' : 'border-red-65']:
            this.hasHighlight,
          ['rounded-l-xl border-r-0']: this.unit !== '',
          ['rounded-xl']: this.unit === '',
          ['w-full']: this.isFullWidth,
          ['w-[350px]']: !this.isFullWidth && this.unit === '',
          ['w-[300px]']: !this.isFullWidth && this.unit !== '',
        })}
        @focus=${this.handleFocus}
        @blur=${this.handleBlur}
        @keyup=${this.handleKeyUp}
        @keydown=${this.handleKeyDown}
        @keypress=${this.handleKeyPress}
        @mouseenter=${this.handleMouseOver}
        @mouseleave=${this.handleMouseOut}
      />
    `
  }

  labelTemplate() {
    return html`
      <label for=${this.name} class="heading-h5 text-neutral-20 pb-2 block"
        >${this.label}</label
      >
    `
  }

  descriptionTemplate() {
    return html`
      <div class="paragraph-12-regular text-neutral-20 pb-2">
        ${this.description ?? nothing}
      </div>
    `
  }

  errorTemplate() {
    return html`<div class="paragraph-12-regular text-red-65 pt-2">
      ${this.error}
    </div>`
  }

  unitTemplate() {
    return html`<div
      class=${customClassMap({
        [this.defaultUnitStyles]: true,
        [this.error === '' ? 'border-neutral-90' : 'border-red-85']:
          !this.hasHighlight,
        [this.error === '' ? 'border-neutral-35' : 'border-red-65']:
          this.hasHighlight,
      })}
      @mouseenter=${this.handleMouseOver}
      @mouseleave=${this.handleMouseOut}
    >
      ${this.unit}
    </div>`
  }

  private handleFocus() {
    this.hasHocus = true
    this.hasHighlight = true
  }

  private handleBlur() {
    this.hasHocus = false
    this.hasHighlight = false
  }

  private handleKeyUp(event: KeyboardEvent) {
    const target = event.target as HTMLInputElement
    const keyEvent = new CustomEvent('on-key-up', {
      detail: {
        value: target.value,
        event,
      },
      bubbles: true,
      composed: true,
    })
    this.dispatchEvent(keyEvent)
  }

  private handleKeyDown(event: KeyboardEvent) {
    const target = event.target as HTMLInputElement
    const keyEvent = new CustomEvent('on-key-down', {
      detail: {
        value: target.value,
        event,
      },
      bubbles: true,
      composed: true,
    })
    this.dispatchEvent(keyEvent)
  }

  private handleKeyPress(event: KeyboardEvent) {
    const target = event.target as HTMLInputElement
    const keyEvent = new CustomEvent('on-key-press', {
      detail: {
        value: target.value,
        event,
      },
      bubbles: true,
      composed: true,
    })
    this.dispatchEvent(keyEvent)
  }

  private handleMouseOver() {
    this.hasHighlight = true
  }

  private handleMouseOut() {
    if (!this.hasHocus) {
      this.hasHighlight = false
    }
  }

  render() {
    return html`
      <div>
        ${this.label ? this.labelTemplate() : nothing}
        ${this.description ? this.descriptionTemplate() : nothing}
        <div class="flex">
          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : nothing}
        </div>
        ${this.error ? this.errorTemplate() : nothing}
      </div>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'lukso-input': LuksoInput
  }
}