import React from 'react';

import { IconCaretUp, IconCaretDown } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { HuTextInfoTooltip } from 'src/components';

type MetricBoxProps = {
  label: string;
  value: string | number;
  percentageChange: number;
  tooltipText: string;
  comparedToDaysText: string;
};

const MetricBox = React.memo(
  ({
    label,
    value,
    percentageChange,
    tooltipText,
    comparedToDaysText,
  }: MetricBoxProps) => {
    const isIncrease = percentageChange >= 0;
    const Icon = isIncrease ? IconCaretUp : IconCaretDown;
    const colorKey = isIncrease ? 'graphics.successText' : 'graphics.errorText';
    const absPercentageChange = Math.abs(percentageChange);

    return (
      <Stack sx={{ gap: '10px', maxWidth: '250px' }}>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            color: theme => theme.palette.new.text.neutral.lighter,
          }}
        >
          <Typography variant="body2">{label}</Typography>
          <HuTextInfoTooltip tooltipText={tooltipText} />
        </Stack>
        <Typography
          variant="globalXL"
          fontWeight="fontWeightSemiBold"
        >
          {value}
        </Typography>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
          <Stack
            component="span"
            sx={{
              color: colorKey,
              flexDirection: 'row',
              alignItems: 'flex-start',
            }}
          >
            <Icon
              width="16px"
              height="16px"
            />
            <Typography
              variant="globalXXS"
              color="text.secondary"
              sx={{ ml: 0.25 }}
            >
              <Box
                component="span"
                sx={{
                  color: colorKey,
                  fontWeight: 'fontWeightSemiBold',
                  width: 'fit-content',
                }}
              >
                {absPercentageChange}%
              </Box>{' '}
              {comparedToDaysText}
            </Typography>
          </Stack>
        </Stack>
      </Stack>
    );
  },
);

MetricBox.displayName = 'MetricBox';

export default MetricBox;