import {
  Button,
  View,
  createInnerAudioContext,
} from '@ray-js/ray'
import React, { FC, useRef, useState } from 'react'

function getRandomNumberMin(): number {
  return Math.floor(Math.random() * (200 - 100 + 1) + 100)
}

const autoplay = true
const loop = true
const playbackRate = 2
const AUDIO_PATH =
  'https://images.tuyacn.com/rms-static/cf60cb10-9f19-11ee-8cd8-b117287658f4-1703064369729.mp3?tyName=1.mp3'
const AUDIO_PATH2 =
  'https://images.tuyacn.com/rms-static/4681f900-9fa4-11ee-af19-cfa45f6de59e-1703123840144.mp3?tyName=2.mp3'

const AudioDemo: FC = () => {
  const audioContext = useRef(null)
  const [audioStatus, setAudioStatus] = useState<string>('')
  const [startTime, setStartTime] = useState<number>(0)

  const operation =
    (
      ops: 'play' | 'pause' | 'stop' | 'resume' | 'seek',
      params?: {
        startTime?: number
        [key: string]: any
      }
    ) =>
    () => {
      if (ops === 'play') {
        setStartTime(params.startTime)
      }
      setAudioStatus(ops)
      audioContext.current[ops]?.({
        ...params,
        success: (res) => console.log(`${ops} success`, res),
        fail: (res) => console.log(`${ops} fail`, res),
        complete: (res) => console.log(`${ops} complete`, res),
      })
    }

  return (
    <View style={{ padding: 20 }}>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={() => {
          audioContext.current = createInnerAudioContext({
            success: (res) => console.log('createInnerAudioContext success', res),
            fail: (res) => console.log('createInnerAudioContext fail', res),
            complete: () => console.log('createInnerAudioContext complete'),
          })

          audioContext.current.onTimeUpdate((res) => {
            console.log('onTimeUpdate callback', res)
          })
        }}
      >
        Create instance
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('destroy')}>
        Destroy
      </Button>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('play', {
          src: AUDIO_PATH,
          autoplay,
          startTime: getRandomNumberMin(),
          loop,
          volume: 1,
          playbackRate,
        })}
      >
        Play track 1
      </Button>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('play', {
          src: AUDIO_PATH2,
          autoplay,
          startTime: getRandomNumberMin(),
          loop,
          volume: 1,
          playbackRate,
        })}
      >
        Play track 2
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('pause')}>
        Pause
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('stop')}>
        Stop
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('resume')}>
        Resume playback
      </Button>

      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('seek', { position: getRandomNumberMin() })}
      >
        Seek
      </Button>
      <View style={{ margin: 10 }}>Current status: {audioStatus}</View>
      <View style={{ margin: 10 }}>autoplay: {'' + autoplay}</View>
      <View style={{ margin: 10 }}>startTime: {'' + startTime}</View>
      <View style={{ margin: 10 }}>loop: {'' + loop}</View>
      <View style={{ margin: 10 }}>playbackRate: {'' + playbackRate}</View>
    </View>
  )
}

export default AudioDemo