import React from 'react';
import { useState } from 'react';
import { useLocation, Link } from 'react-router-dom';

import Wave from './Wave/Wave';
import Word from './Word';
import ResonanceMenu from './ResonanceMenu';

import { Divider, Breadcrumb, Alert } from 'antd';


const GavtPractice: React.FC = () => {
  const [currentVowelIndex, setCurrentVowelIndex] = useState(0);
  const location = useLocation();

  const { frequencies } = location.state || {};

  const refFreqArray = Object.entries(frequencies || {}).map(([vowel, freq]) => ({
    vowel,
    freq: Number(freq)
  }));

  const handleNextVowel = () => {
    setCurrentVowelIndex((prevIndex) => (prevIndex + 1) % refFreqArray.length);
  };

  return (
    <>
      <div style={{display: 'flex', justifyContent: 'start', width: '70%'}}> 
        <Breadcrumb 
          items={[
            {
              title: <Link to="/resonance/selection">Setup</Link>,
            },
            {
              title:'Practice',
            }
          ]}
        />
      </div>
      <br/>
      <Alert
        style={{ 
          backgroundColor: '#FFEFEF',
          borderColor: '#FFEFEF'
        }} 
        description={
          <>
              To avoid vocal strain, we strongly recommend using an external microphone while interacting with this app.
              If you don't see the wave, wait a little bit, or try refreshing the page.
          </>
        }
        type="info"
      />
      <br/>
      <h2>Resonance: Practice</h2>
      <Word 
        refFreqArray={refFreqArray}
        currentVowelIdx={currentVowelIndex}
        onNextVowel={handleNextVowel}
      />
      <Divider />
      <Wave
        currentVowelIdx={currentVowelIndex}
        refFreqArray={refFreqArray}
      />
      <ResonanceMenu />
    </>
  );
};

export default GavtPractice;