import { IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';

import { goalsRoutes } from 'src/pages/dashboard/goals/routes';
import { type Goal } from 'src/pages/dashboard/goals/types';
import {
  goalVisualProgress,
  isGoalFinishedStatus,
} from 'src/pages/dashboard/goals/utils';

export type ProgressBarProps = {
  goal: Goal;
  canViewGoalDetails: boolean;
};

const ProgressBar = ({ goal, canViewGoalDetails }: ProgressBarProps) => {
  const canNavigateToGoal = canViewGoalDetails;

  const handleClick = () => {
    if (canNavigateToGoal) {
      window.open(
        goalsRoutes.detail(goal?.id),
        '_blank',
        'noopener,noreferrer',
      );
    }
  };

  return (
    <HuCardContainer
      fullWidth
      padding={24}
      onClick={canNavigateToGoal ? handleClick : undefined}
      sx={{
        transition: theme =>
          theme.transitions.create('border-color', {
            duration: theme.transitions.duration.shortest,
          }),
        ...(canNavigateToGoal && {
          '&:hover': {
            borderColor: theme => theme.palette.new.border.neutral.brand,
          },
        }),
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          minWidth: 0,
          width: '100%',
        }}
      >
        <HuProgressBar
          title={goal.title}
          variant="determinate"
          current={
            isGoalFinishedStatus(goal.status)
              ? 100
              : goalVisualProgress(goal.progress || 0)
          }
          hasPercentage
          progressHeight={8}
          withEllipsis
          sx={{ flex: 1, minWidth: 0, width: '100%' }}
        />
        {canNavigateToGoal && (
          <IconChevronRight
            size={18}
            color="currentColor"
            style={{ flexShrink: 0, opacity: 0.6 }}
          />
        )}
      </Stack>
    </HuCardContainer>
  );
};

export default ProgressBar;