import {Controller} from '@hotwired/stimulus'
// @ts-expect-error: this is untyped https://github.com/mmccall10/el-transition/issues/11
import {enter, leave} from 'el-transition'

export default class FlashController extends Controller {
  static classes = ['ariadne-hidden']

  static values = {
    timer: {
      default: 4000,
      type: Number,
    },
  }
  declare readonly hasHiddenClass: boolean

  declare readonly hasTimerValue: boolean
  declare readonly hiddenClass: string
  declare readonly hiddenClasses: string[]
  declare timerValue: number

  async connect(): Promise<void> {
    // Start animation as soon as it connects to the dom
    await this.show()
    const noop = (): void => {}

    // Set a timer for it to be removed from the dom automatically
    setTimeout(() => {
      this.hide().then(noop).catch(noop)
    }, this.timerValue)
  }

  async disconnect(): Promise<void> {
    await this.hide()
  }

  async hide(): Promise<void> {
    await leave(this.element)

    if (this.hasHiddenClass) {
      this.element.classList.add(this.hiddenClass)
    } else {
      this.element.classList.add('ariadne-hidden')
    }

    this.element.remove()
  }

  async show(): Promise<void> {
    if (this.hasHiddenClass) {
      this.element.classList.remove(this.hiddenClass)
    } else {
      this.element.classList.remove('ariadne-hidden')
    }
    await enter(this.element)
  }
}