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

export const ArchiveColumn = ({ lineGroup, data, interval, style, headerHeight, yStart }) => {
  const [lineGroupWithoutShapes, setLineGroupWithoutShapes] = useState([])
  const [pv, setPV] = useState([])

  useEffect(() => {
    const lgws = lineGroup.filter(cfg => !cfg.isShape)
    setLineGroupWithoutShapes(lgws)
    setPV(lgws.filter(line => line.showLabels).map(line => ({
      color: line.color,
      label: line.label
    })))
  }, [lineGroup])


  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={lineGroupWithoutShapes}
        interval={interval}
        yDisplay={false}
        yStart={yStart}
      />
    </div>
  )
}