import { useMemo } from 'react';

import { ArrowDown } from 'lucide-react';

import { cn } from '@kit/ui/utils';
import { AnalysisResultForDisplay } from './analysis-doctor';

export enum AnalysisResultLevel {
  VERY_LOW = 0,
  LOW = 1,
  NORMAL = 2,
  HIGH = 3,
  VERY_HIGH = 4,
}

const Level = ({
  isActive = false,
  color,
  isFirst = false,
  isLast = false,
  arrowLocation,
}: {
  isActive?: boolean;
  color: 'destructive' | 'success' | 'warning' | 'gray-200';
  isFirst?: boolean;
  isLast?: boolean;
  arrowLocation?: number;
}) => {
  return (
    <div
      className={cn(`bg-${color} relative h-3 flex-1`, {
        'opacity-20': !isActive,
        'rounded-l-lg': isFirst,
        'rounded-r-lg': isLast,
      })}
    >
      {isActive && (
        <div
          className="absolute top-[-14px] left-1/2 -translate-x-1/2 rounded-[10px] bg-white p-[2px]"
          style={{ left: `${arrowLocation}%` }}
        >
          <ArrowDown strokeWidth={2} />
        </div>
      )}
    </div>
  );
};

export const AnalysisLevelBarSkeleton = () => {
  return (
    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
      <Level color="gray-200" />
    </div>
  );
};

const AnalysisLevelBar = ({
  normLowerIncluded = true,
  normUpperIncluded = true,
  level,
  results,
}: {
  normLowerIncluded?: boolean;
  normUpperIncluded?: boolean;
  level: AnalysisResultLevel;
  results: AnalysisResultForDisplay;
}) => {

  const { norm_lower: lower, norm_upper: upper, response_value: value } = results;
  const arrowLocation = useMemo(() => {
    if (value < lower!) {
      return 0;
    }
    
    if (normLowerIncluded || normUpperIncluded) {
      return 50;
    }

    const calculated = ((value - lower!) / (upper! - lower!)) * 100;
    
    if (calculated > 100) {
      return 100;
    }
    
    return calculated;
  }, [value, upper, lower]);

  const [isVeryLow, isLow, isHigh, isVeryHigh] = useMemo(() => [
    level === AnalysisResultLevel.VERY_LOW,
    level === AnalysisResultLevel.LOW,
    level === AnalysisResultLevel.HIGH,
    level === AnalysisResultLevel.VERY_HIGH,
  ], [level, value, upper, lower]);

  const hasAbnormalLevel = isVeryLow || isLow || isHigh || isVeryHigh;

  return (
    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
      {normLowerIncluded && (
        <>
          <Level
            isActive={isVeryLow}
            color="destructive"
            isFirst
          />
          <Level isActive={isLow} color="warning" />
        </>
      )}

      <Level
        isFirst={!normLowerIncluded}
        isLast={!normUpperIncluded}
        {...(hasAbnormalLevel ? { color: "warning", isActive: false } : { color: "success", isActive: true })}
        arrowLocation={arrowLocation}
      />

      {normUpperIncluded && (
        <>
          <Level
            isActive={isHigh}
            color="warning"
          />
          <Level
            isActive={isVeryHigh}
            color="destructive"
            isLast
          />
        </>
      )}
    </div>
  );
};

export default AnalysisLevelBar;
