import { Grid, GridItem } from '../../components/Grid'
import { Column } from '../../components/charts/Column'

export const ArchiveColumn = ({ lineGroup, data, interval, style, headerHeight, yStart }) => {
  const dataLast = data?.[data.length - 1]
  const pv = lineGroup.filter(line => line.showLabels).map(line => ({
    color: line.color,
    label: line.label,
    unit: line.units,
    value: dataLast?.[line.xAccessorName]
  }))

  return (
    <div style={style}>
      <Grid style={{ height: headerHeight, margin: 0 }}>
        {pv?.map((v, idx) => (
          <GridItem className={'display_chart_label'} key={idx} row={idx} col={1} style={{ color: v.color, padding: '0 8px' }}>{v.label}</GridItem>
        ))}
      </Grid>
      <Column
        data={data}
        lineGroup={lineGroup}
        interval={interval}
        yDisplay={false}
        yStart={yStart}
      />
    </div>
  )
}