import React, { memo } from 'react'

import { DISPLAY_DATA_POINT_ROWS } from './constant'
import * as S from './style'

type Props = {
  values: { t: number; v: number | string | Uint8Array }[]
}

export const TimeSeriesText: React.VFC<Props> = memo((props) => {
  const { values } = props

  // データポイント配列の最新からN件を表示します。
  // 件数はDISPLAY_DATA_POINT_ROWSで指定した値です。
  const displayedValues = values.slice(-1 * DISPLAY_DATA_POINT_ROWS).reverse()

  return (
    <S.Section>
      {displayedValues.map(({ t, v }, idx) => (
        <div key={idx} style={{ fontFamily: 'monospace' }}>
          {t} {v}
        </div>
      ))}
    </S.Section>
  )
})