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

export const ChartTimeOnlineFooter = ({ data, lineGroup }) => {
  const getFooterData = (name) => {
    const dataIdx = data && lineGroup?.find(line => line?.footer === name)?.xAccessorName
    return (<ValueDisplay value={data?.[dataIdx]}/>)
  }

  let spValues = getFooterData('SP')
  const idleValues = getFooterData('IDLE')

  const popContent = lineGroup?.filter(line => line.footer === true).map(line => (
    <div key={line.label}>
      {line.label}
      <ValueDisplay value={data?.[line.xAccessorName]}/>
    </div>
  ))

  return(
    <div>
      {popContent?.length > 0 ? (
        <Popover content={popContent}>
          <div className={'chart-footer'}>
            <ControlOutlined className={'display_label'}/>
            <div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
          </div>
        </Popover>
      ) : (
        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
          <div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
        </div>
      )}
      <div style={{display: 'flex'}}>
        <span className='display_label'>х.х.</span>
        <div style={{display: 'flex', flexDirection: 'column'}}>{idleValues}</div>
      </div>
    </div>
  )
}