import { IconTargetArrow } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuPills from '@material-hu/components/design-system/Pills';
import DsProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';

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

import { type Goal } from '../../types';
import { goalVisualProgress } from '../../utils';
import { PRIORITY_PILL_TYPE } from '../constants';

import ValueMarkers from './ValueMarkers';

export type ProgressBarProps = {
  goal: Goal;
};

const ProgressBar = ({ goal }: ProgressBarProps) => {
  const { t } = useLokaliseTranslation('goals');
  const theme = useTheme();
  const progressValue = goalVisualProgress(goal.progress);

  return (
    <Stack
      sx={{
        borderRadius: '16px',
        gap: 1.5,
        px: 3,
        py: 2,
        backgroundColor: theme.palette.new.background.layout.tertiary,
        border: `1px solid ${theme.palette.new.border.neutral.default}`,
        width: '100%',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
          <HuAvatar
            Icon={IconTargetArrow}
            size="medium"
            color="primary"
          />
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.neutral.default"
          >
            {goal.title}
          </Typography>
        </Stack>
        <HuPills
          label={t(`priority.${goal.priority.toLowerCase()}`)}
          type={PRIORITY_PILL_TYPE[goal.priority]}
          size="small"
        />
      </Stack>
      <DsProgressBar
        variant="determinate"
        current={progressValue}
        total={100}
        title={t('detail.current_value', { value: goal.currentValue })}
        hasPercentage
        helper={
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              position: 'relative',
            }}
          >
            <ValueMarkers goal={goal} />
          </Stack>
        }
      />
    </Stack>
  );
};

export default ProgressBar;
