import { useState } from 'react'
import './App.css'
import { Button } from 'react-bootstrap';
import Accordion from 'react-bootstrap/Accordion';
import Form from 'react-bootstrap/Form';
import { initials, finales } from './Data';
import { Btn, BtnSimple } from './Btn';
import { isEnabled, toggle } from './Utils';

function App() {

  const [count, setCount] = useState(10)
  const [pause, setPause] = useState(3)

  const [ enabledInitials, setInitialsState ] = useState([] as String[])
  const toggleInitialsState = (caption: String) => setInitialsState(toggle(enabledInitials,caption))

  const [ enabledFinals, setFinalsState ] = useState([] as String[])
  const toggleFinalsState = (caption: String) => setFinalsState(toggle(enabledFinals,caption))

  return (
    <>
      <h1>Диктант pīnyīn</h1>
      <Accordion defaultActiveKey="0">
      <Accordion.Item eventKey="0">
        <Accordion.Header>Выберите инициали</Accordion.Header>
        <Accordion.Body>
           <Btn type="primary" text="Выбрать все" altText="Снять все"/>
           {initials.map( (text) => <BtnSimple
                                            type="primary"
                                            text={text}
                                            enabled={isEnabled(enabledInitials, text)}
                                            onclick={toggleInitialsState}/>
                            )}
        </Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="1">
        <Accordion.Header>Выберите финали</Accordion.Header>
        <Accordion.Body>
           <Btn type="success" text="Выбрать все" altText="Снять все"/>
           {finales.map( (text) => <BtnSimple
                                            type="success"
                                            text={text}
                                            enabled={isEnabled(enabledFinals, text)}
                                            onclick={toggleFinalsState}/>
                            )}
</Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="2">
        <Accordion.Header>Параметры</Accordion.Header>
        <Accordion.Body>
          <Form.Label>Количество слогов {count}</Form.Label>
          <Form.Range defaultValue={10} min={5} max={50} step={5}/>
          <Form.Label>Пауза между слогами {pause} секунд</Form.Label>
          <Form.Range defaultValue={3} min={1} max={10} step={1}/>
        </Accordion.Body>
      </Accordion.Item>
    </Accordion>
      <div className="card">
        <Button variant="success" onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </Button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App