import { useMemo } from "react";
import { View } from "react-native";
import { Text } from "react-native-paper";

import { PriorityStatus } from "@/constants/priorityStatusEnum";
import { SizeEnum } from "@/constants/sizeEnum";

type PriorityData = {
  bars: number;
  color: string;
};

const PRIORITY_CONFIG: Record<string, PriorityData> = {
  [PriorityStatus.HIGH_PRIORITY]: { bars: 3, color: "bg-highRisk" },
  [PriorityStatus.MODERATE_PRIORITY]: { bars: 2, color: "bg-mediumRisk" },
  [PriorityStatus.LOW_PRIORITY]: { bars: 1, color: "bg-lowRisk" },
};

const SIZE_CONFIG = {
  [SizeEnum.Small]: {
    width: "w-1",
    heights: ["h-2", "h-3", "h-4"],
  },
  [SizeEnum.Moderate]: {
    width: "w-1.5",
    heights: ["h-3", "h-4", "h-5"],
  },
  [SizeEnum.Regular]: {
    width: "w-1.5",
    heights: ["h-3", "h-4", "h-5"],
  },
  [SizeEnum.Large]: {
    width: "w-2",
    heights: ["h-4", "h-6", "h-8"],
  },
};

interface PriorityIndicatorProps {
  priority: PriorityStatus | string;
  showLabel?: boolean;
  size?: SizeEnum;
}

export const PriorityIndicator = ({
  priority,
  showLabel = false,
  size = SizeEnum.Moderate,
}: PriorityIndicatorProps) => {
  const { filledBars, barColor, barSizes } = useMemo(() => {
    const priorityData = PRIORITY_CONFIG[priority] || {
      bars: 0,
      color: "bg-mediumGray",
    };
    const sizeData = SIZE_CONFIG[size] || SIZE_CONFIG[SizeEnum.Moderate];

    return {
      filledBars: priorityData.bars,
      barColor: priorityData.color,
      barSizes: {
        width: sizeData.width,
        heights: sizeData.heights,
      },
    };
  }, [priority, size]);

  return (
    <View className="flex-row items-center">
      <View className="flex-row items-end gap-0.5 mr-1">
        <View
          className={`${barSizes.width} ${barSizes.heights[0]} rounded-sm ${
            filledBars >= 1 ? barColor : "bg-mediumGray"
          }`}
        />

        <View
          className={`${barSizes.width} ${barSizes.heights[1]} rounded-sm ${
            filledBars >= 2 ? barColor : "bg-mediumGray"
          }`}
        />

        <View
          className={`${barSizes.width} ${barSizes.heights[2]} rounded-sm ${
            filledBars >= 3 ? barColor : "bg-mediumGray"
          }`}
        />
      </View>

      {showLabel && (
        <Text className="text-xs ml-1">
          {typeof priority === "string"
            ? priority.charAt(0).toUpperCase() + priority.slice(1).toLowerCase()
            : priority}
        </Text>
      )}
    </View>
  );
};