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

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(newWells)
      setWells( newWells )
    }
    catch(e){
      notify('Не удалось загрузить список скважин', 'error')
      console.error(`${e}`);
    }
    setLoader(false)
  }

  useEffect(()=>updateWellsList(), [])

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