import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import dayjs from 'dayjs';
import timezonePlugin from 'dayjs/plugin/timezone';
import utcPlugin from 'dayjs/plugin/utc';

import { getUserTimezoneSelector } from '@/modules/@common/user/redux/selectors';

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

dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);

function CustomTick(props) {
  const timezone = useSelector(getUserTimezoneSelector);

  if (props.payload.value === 'break') {
    return (
      <g transform={`translate(${props.x},${props.y})`}>
        <text x={0} y={0} dy={10} className={styles.Break}>
          <tspan textAnchor="middle" x="0">
            {props.payload.value}
          </tspan>
        </text>
      </g>
    );
  }

  const time = dayjs(props.payload.value).tz(timezone);

  return (
    <g transform={`translate(${props.x},${props.y})`}>
      <text x={0} y={0} dy={10} className={styles.Text}>
        <tspan textAnchor="middle" x="0">
          {time.format('HH:mm')}
        </tspan>
        <tspan textAnchor="middle" x="0" dy="12" className={styles.TextDate}>
          {time.format('MMM DD')}
        </tspan>
      </text>
    </g>
  );
}

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

export default CustomTick;
