import Nullstack, { NullstackClientContext } from 'nullstack'
const PLACEHOLDER_AUDIO =
  'http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg'

class ChildComplexRef extends Nullstack {

  element: HTMLAudioElement = null
  hydrate({ ref }: NullstackClientContext) {
    // ref === { object: ..., property: ... }
    ref.object[ref.property] = this.element // sets parent
    this.element.innerHTML = 'a text to parent' // also sets parent
  }

  render() {
    return <audio ref={this.element} src={PLACEHOLDER_AUDIO} />
  }

}

const constComplexRef = {
  object: { fn: null as HTMLAudioElement },
  property: 'fn' as const,
}

class ComplexRef extends Nullstack {

  complexRef: HTMLAudioElement
  playAudioRef() {
    this.complexRef.play() // plays rightly typed
    constComplexRef.object[constComplexRef.property].play() // also plays rightly typed
  }

  render() {
    return (
      <>
        <ChildComplexRef ref={this.complexRef} />
        <ChildComplexRef ref={constComplexRef} />
        <button onclick={this.playAudioRef}>Play Child's Ref</button>
      </>
    )
  }

}

class SimpleRef extends Nullstack {

  simpleAudioRef: HTMLAudioElement
  runsAfterShowing() {
    console.log('audio tag in the house!')
  }

  render({ ref }: NullstackClientContext) {
    return (
      <>
        <audio ref={this.simpleAudioRef} TS="right!" src={PLACEHOLDER_AUDIO} />
        <audio ref={this.runsAfterShowing} TS="right!" />
        <audio ref={ref} TS="right!" />
        <button onclick={() => this.simpleAudioRef.play()}>
          Play this Ref
        </button>
      </>
    )
  }

}

function PropRef({ ref }: Partial<NullstackClientContext<{ ref: string }>>) {
  return ref // ref === string
}

class Refs extends Nullstack {

  render() {
    return (
      <>
        <SimpleRef />
        <ComplexRef />

        <PropRef ref="a random string prop" />
        <PropRef ref={['TS Error: it should be an string, user!']} />
        <PropRef ref={() => 'TS Error: you know what a string prop means?'} />

        {/**
        // Uncomment this to break render
        // because a Proxy Ref function is not (() => void | function() {})
        <audio
          ref={() => {
            console.log("Error in Nullstack, where're you going at though??")
          }}
        />
        **/}
      </>
    )
  }

}

export default Refs