DateConsumptionVisualizer.tsx

import React from 'react'
import { DateTime } from 'luxon'
import { TimeStep } from 'services/dataConsumptionContracts'

import DateFormatConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DateFormatConsumptionVisualizer'
import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
import DoubleRightArrowIcon from 'assets/icons/ico/double-right-arrow.svg'
import DoubleLeftArrowIcon from 'assets/icons/ico/double-left-arrow.svg'

interface DateConsumptionVisualizerProps {
  timeStep: TimeStep
  date: DateTime
  indexDisplayed: number
  handleClickMove(increment: number): void
  handleChangeIndex: (index: number) => void
}

const DateConsumptionVisualizer = ({
  timeStep,
  date,
  indexDisplayed,
  handleClickMove,
  handleChangeIndex,
}: DateConsumptionVisualizerProps) => {
  return (
    <div className="cv-content-date">
      <div>
        <StyledIconbutton
          className="cv-button-double"
          onClick={() => handleChangeIndex(indexDisplayed + 1)}
          icon={DoubleLeftArrowIcon}
          size={16}
        />
      </div>
      <div>
        <StyledIconbutton
          className="cv-button"
          onClick={() => handleClickMove(-1)}
          icon={LeftArrowIcon}
          size={16}
        />
      </div>
      <DateFormatConsumptionVisualizer timeStep={timeStep} date={date} />
      <div>
        <StyledIconbutton
          className="cv-button"
          onClick={() => handleClickMove(1)}
          icon={RigthArrowIcon}
          size={16}
        />
      </div>
      <div>
        <StyledIconbutton
          className="cv-button-double"
          onClick={() => handleChangeIndex(indexDisplayed - 1)}
          icon={DoubleRightArrowIcon}
          size={16}
        />
      </div>
    </div>
  )
}

export default DateConsumptionVisualizer