import { useState } from 'react'
import './App.css'
import { Badge, Button, ListGroup } from 'react-bootstrap';
import { initials, finales } from './data';
import { BtnColor, Tone } from './types';
import { strings } from './strings';
import { useStateContext } from './store';
import { Params } from './params';
import { ActionType, ToggleType } from './reducer';
import { ButtonSet } from './buttons';

enum Status {params, plaing, plaied, showlist}

function App() {
  
  const { state, dispatch } = useStateContext();

//---------------- to found state
  const isFound = ():boolean => state.foundSyllables!.length > 0
  const [plaingNo, setPlaingNo ] = useState(0)

const [ status, setStatus ] = useState(Status.params)

const beginDictation = (): void => {
  dispatch({ type: ActionType.refreshPlayList })
  playDictation2(state.randomTones!)
}

const playDictation2 = (randomTones: Tone[]) => {
  if ( randomTones.length == 0 ) return
  let audios:HTMLAudioElement[] = []
  randomTones.forEach(element => {
     audios = [...audios, new Audio(`/src/assets/audio/${element.tone}.mp3`) ]
  });
  console.debug(audios)
  if ( audios.length == 0 ) return
  for(let x=0; x<audios.length-1;x++)
  {
    audios[x].onended = () =>  setTimeout( () => { 
      let pno = x+2
      setPlaingNo(pno)
      audios[x+1].play()
    }, 1000*state.sylPause! ) ;
  }
  audios[audios.length-1].onended = () => setStatus(Status.plaied)
  setStatus(Status.plaing)
  setPlaingNo(1)
  audios[0].play()
}

const renderRandomTones2 = () => {
  return state.randomTones!.map( (ton, i) => { return <span key={i}><Badge bg="success" pill>{ton.caption}</Badge>{'  '}</span> })
}

const refresh = () => {
  dispatch({ type: ActionType.refreshPlayList })
  setStatus(Status.params)
}

  return (
      <>
      <h1>Диктант pīnyīn</h1>
      <ListGroup>
      <ListGroup.Item disabled={status != Status.params}>
        <h2>{strings.selectInitiales}</h2>
        <ButtonSet source={initials} color={BtnColor.blue} toggle={ToggleType.init}/>
      </ListGroup.Item>

      <ListGroup.Item disabled={status != Status.params}>
        <h2>{strings.selectFinales}</h2>
        <ButtonSet source={finales} color={BtnColor.green} toggle={ToggleType.fin}/>
      </ListGroup.Item>

      <ListGroup.Item disabled={status != Status.params}>
        <h2>{strings.params}</h2>
          <Params/>
       </ListGroup.Item>
      <ListGroup.Item>
        { status == Status.params &&
          <>
        Выбрано {state.initiales!.length} инициалей,  {state.finales!.length}  финалей, найдено {state.foundSyllables!.length} слогов, { state.foundTones!.length } тонов , 
        <br/>
        <Button variant={isFound() ? "success" : "secondary"} size="lg"  onClick={()=>beginDictation()} disabled={!isFound()}>
            {isFound() ? "Начать диктант!" : "Выберите инициали и финали" }
          </Button>
          </>
        }
        {
          status == Status.plaing &&
          <h1>Воспроизводится...{plaingNo}</h1>
        }
        {
          status == Status.plaied &&
          <Button variant="success" onClick={()=>setStatus(Status.showlist)}>Показать слоги</Button>
        }
        {
          status == Status.showlist &&
          <>
            <div>{renderRandomTones2()}</div>
            <br/>
            <Button variant="success" onClick={()=>refresh()}>В начало</Button>
          </>
        }
      </ListGroup.Item>
      </ListGroup>
      </>
  )
}

export default App