import React, { useState, useEffect } from 'react';
import uuid from 'uuid';
import { Container, Icon, Input, Segment, List } from 'semantic-ui-react'

import DownloadItem from './downloadItem'
import {push} from './downloader'


function App() {
  const [list, setList] = useState([])
  const [url, setUrl] = useState('')
  const [obj, setObj] = useState({ key: '', url: '' })

  // console.log('render app ;;;; ', list)
  function updateSt (key, status, mp3) {
    console.log('list :::: ', list)
    setList([...list.map(t => {
      if (t.key === key) {
        t.status = status
        t.mp3 = mp3
      }
      return t
    })])
  }

  useEffect(() => {
    if (list.length === 0) return
    let key = obj.key
    let url = obj.url
    push(key, url, (key) => {
      updateSt(key, 1, '')
    }, (key, status, mp3) => {
      updateSt(key, status, mp3)
    // }, async () => {
    //   // console.log('running :::: ', key)
    //   // console.log('list :::: ', list)
    //   let success = 0
    //   let mp3Url = ''
    //   updateSt(key, 1, mp3Url)
    //   // setList([...list.map(t => {
    //   //   if (t.key === key) {
    //   //     t.status = 1
    //   //   }
    //   //   return t
    //   // })])
    //   try {
    //     let result = await axios({
    //       method: 'post',
    //       url: '/api/youtube/download',
    //       data: {
    //         url
    //       }
    //     })
    //     mp3Url = result.data.url
    //     success = 2
    //   } catch(err ) {
    //     success = -1
    //   }
    // // setList([...list.map(t => {
    // //   if (t.key === key) {
    // //     t.status = success
    // //     t.map = mp3Url
    // //   }
    // //   return t
    // // })])
    // updateSt(key, success, mp3Url)
    })
  }, [obj])

  function addToList () {
    let key = uuid.v4()
    const item = { key, url, mp3: '', status: 0 }
    setList([...list, item])
    setObj({ key, url })
    // axios({
    //   method: 'post',
    //   url: '/api/youtube/download',
    //   data: {
    //     url
    //   }
    // }).then(res => {
    //   item.mp3 = res.data.url
    //   item.status = 1
    //   setList([...list, item])
    // })
    
    setUrl('')
  }
  
  return (
    <div style={{ paddingTop: '10px' }}>
      <Container textAlign="center">
        <div>
          <Input icon={<Icon name='download' inverted circular link onClick={addToList} />} 
            onChange={t => setUrl(t.target.value)}
            onKeyPress={evt => {
              console.log(evt.key)
              if (evt.key === 'Enter') {
                addToList()
              }
            }}
            value={url}
            placeholder='Input URL' />
        </div>
        <Segment stacked>
          <List divided relaxed>
          {
            list.map(t => <DownloadItem key={t.key} url={t.url} mp3={t.mp3} status={t.status} />)
          }
          </List>
        </Segment>
      </Container>
    </div>
  );
}

export default App;