import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

let imgSet = [
  'https://kot-pes.com/wp-content/uploads/2018/12/post_5c249026dde11.jpg',
  'https://bigpicture.ru/wp-content/uploads/2019/12/DmrVIH7W4AAU_90-800x533.jpg',
  'https://zatusim.com/wp-content/uploads/2018/11/podezd-23.jpg',
  'https://cs6.pikabu.ru/post_img/big/2015/01/17/7/1421491091_2128293906.jpg'
]


const Dots = ({count, active, onChange}) => {
  let liArr = []
  for(let i = 0; i < count; i++) {
    liArr.push(
      <li
        value={i} 
        style={{
          margin:'0px 25px', 
          fontSize:'35px',
          color: active === i? 'blueviolet' : 'black'}}
        onClick={(e)=> {
          for(let li of e.target.closest('ul').children) {
            li.value === e.target.value? li.style.color = 'blueviolet' : li.style.color = 'black'
          }
          onChange(e.target.value)
        }}></li>
    )
  }

  return (
    <ul style={{justifyContent:'center' ,display:'flex', paddingLeft:'none'}}>
      {liArr}
    </ul>
  )
}

const Gallery = ({images=[]}) => {

  let [current, setCurrent] = useState(0)

  useEffect(()=>{
    if(current > images.length-1) {
      setCurrent(0)
    } else if(current < 0) {
      setCurrent(images.length -1)
    }
  },[current])

  return(
    <div>
      <h2>{current+1}</h2>
      <img alt="pic" style={{maxWidth:'500px', height:'auto'}} src={images[current]}/>
      <div style={{marginTop:'10px'}}>
        <Dots 
          count={images.length}
          active={current}
          onChange={value => setCurrent(value)}/>
      </div>
      <div style={{marginTop:'10px'}}>
        <button style={{fontSize:'30px'}} onClick={() => setCurrent(current-1)}>&#8592;</button>
        <button style={{fontSize:'30px'}} onClick={() => setCurrent(current+1)}>&#8594;</button>
      </div>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <h1>React Slider</h1>
      <Gallery images={imgSet}/>
    </div>
  );
}

export default App;