import { useState, useEffect } from 'react'
import { WellService } from '../services/api'
import Loader from '../components/Loader'
import { Table } from 'antd' // TreeSelect 
import { useHistory } from 'react-router-dom'

const columns = [
  {
    title: 'Месторождение',
    dataIndex: 'deposit',
    key: 'deposit',
  },
  {
    title: 'Куст',
    dataIndex: 'cluster',
    key: 'cluster',
  },
  {
    title: 'Скважина',
    dataIndex: 'caption',
    key: 'caption',
  },  
  {
    title: 'Данные',
    dataIndex: 'lastData',
    key: 'lastData',
  },
];

export default function Wells(props){
  const [wells, setWells] = useState([])
  const [loader, setLoader] = useState(false)
  const history = useHistory()

  const updateWellsList = async () => {
    setLoader(true)
    try{
      let newWells = (await WellService.getWells()).map(w =>{return {key:w.id, ...w}})
      console.log(Wells.wellsTree)
      setWells( newWells )
    }
    catch(e){
      console.error(`${e.message}`);
    }
    setLoader(false)
  }

  useEffect(()=>updateWellsList())

  return(<>
      <h2>Скважины</h2>
      <Table 
        dataSource={wells} 
        columns={columns}
        onRow={(record) => {
          return {
            onClick: event => {history.push(`/well/${record.id}/`)},
          };
        }}/>
      {loader&&<Loader/>}
    </>)
}