import React from 'react';
import PropTypes from 'prop-types';

import styles from './CustomTick.module.scss';

function CustomTick(props) {
  const splited = props.payload.value.split('|');
  const fullDate = splited[0];
  const time = splited[1];
  const day = splited[2];

  return (
    <g transform={`translate(${props.x},${props.y})`}>
      <text x={0} y={0} dy={10} className={styles.Text}>
        {time ? (
          <>
            <tspan textAnchor="middle" x="0">
              {time}
            </tspan>
            {day && (
              <tspan textAnchor="middle" x="0" dy="15">
                {day}
              </tspan>
            )}
          </>
        ) : (
          <tspan textAnchor="middle" x="0">
            {fullDate}
          </tspan>
        )}
      </text>
    </g>
  );
}

CustomTick.propTypes = {
  payload: PropTypes.shape({
    value: PropTypes.string.isRequired,
  }).isRequired,
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired,
};

export default CustomTick;
