import {ValueDisplay} from './Display'
import {ControlOutlined} from '@ant-design/icons'
import {Popover} from 'antd'

export const ChartTimeOnlineFooter = (props) =>{  
  const { data,
    lineIdle,
    lineSp,
    linesOther} = props
  
  let sp = null
  let idle = null

  if(data && lineSp)
    sp = data[lineSp.xAccessorName]

  if(data && lineIdle)
    idle = data[lineIdle.xAccessorName]

  let spField = <ValueDisplay value={sp}/>

  let popContent = linesOther?.map(line =>{
    let val = null      
    if(data)
      val = data[line.xAccessorName]
    return (
    <div key={line.label}>
      {line.label}
      <ValueDisplay value={val}/>
    </div>)
  })

  if(popContent)
    spField = <Popover content={popContent}>
      <div className="chart-footer">
        <ControlOutlined className='display_label'/>
        {spField}
      </div>
    </Popover>
  else
    spField = <div style={{display:"flex"}}>
        {spField}
      </div>

  return(<div>
    {spField}
    <div style={{display:"flex"}}>
      <span className='display_label'>х.х.</span>
      <ValueDisplay value={idle}/>
    </div>
  </div>)
}