import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type Goal } from '../../types';
import { computeMarkerPosition, hasValue, markerTypographySx } from '../utils';

export type ValueMarkersProps = {
  goal: Goal;
};

const ValueMarkers = ({ goal }: ValueMarkersProps) => {
  const { t } = useLokaliseTranslation('goals');
  const theme = useTheme();
  const typographySx = markerTypographySx(theme);

  const maxExtendsScale =
    hasValue(goal.maxValue) &&
    Number(goal.maxValue) > Number(goal.objectiveValue);
  const scaleEnd = maxExtendsScale ? goal.maxValue : goal.objectiveValue;

  return (
    <>
      <Typography sx={typographySx}>
        {t('detail.initial_value', {
          value: goal.startingValue,
          percentage: '',
        })}
      </Typography>
      {hasValue(goal.minValue) && (
        <Typography
          sx={{
            ...typographySx,
            position: 'absolute',
            left: `${computeMarkerPosition(goal.minValue, goal.startingValue, scaleEnd)}%`,
          }}
        >
          {t('detail.min_value', {
            value: goal.minValue,
            percentage: '',
          })}
        </Typography>
      )}
      {hasValue(goal.maxValue) && !maxExtendsScale && (
        <Typography
          sx={{
            ...typographySx,
            position: 'absolute',
            left: `${computeMarkerPosition(goal.maxValue, goal.startingValue, scaleEnd)}%`,
          }}
        >
          {t('detail.max_value', {
            value: goal.maxValue,
            percentage: '',
          })}
        </Typography>
      )}
      <Typography
        sx={
          maxExtendsScale
            ? {
                ...typographySx,
                position: 'absolute',
                left: `${computeMarkerPosition(goal.objectiveValue, goal.startingValue, scaleEnd)}%`,
              }
            : { ...typographySx, marginLeft: 'auto' }
        }
      >
        {t('detail.objetive_value', {
          value: goal.objectiveValue,
          percentage: '',
        })}
      </Typography>
      {maxExtendsScale && (
        <Typography sx={{ ...typographySx, marginLeft: 'auto' }}>
          {t('detail.max_value', {
            value: goal.maxValue,
            percentage: '',
          })}
        </Typography>
      )}
    </>
  );
};

export default ValueMarkers;
