import { Badge, Text } from "@fluentui/react-components";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import { useJailDetailPageStyles } from "./jailDetailPageStyles";
import type { Jail } from "../../types/jail";
import { formatSeconds } from "../../utils/formatDate";

interface BantimeEscalationSectionProps {
  jail: Jail;
}

export function BantimeEscalationSection({ jail }: BantimeEscalationSectionProps): React.JSX.Element | null {
  const styles = useJailDetailPageStyles();
  const sectionStyles = useCommonSectionStyles();
  const esc = jail.bantime_escalation;
  if (!esc?.increment) return null;

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text as="h2" size={500} weight="semibold">
          Ban-time Escalation
        </Text>
        <Badge appearance="filled" color="informative">enabled</Badge>
      </div>
      <div className={styles.grid}>
        {esc.factor !== null && (
          <>
            <Text className={styles.label}>Factor:</Text>
            <Text className={styles.mono}>{String(esc.factor)}</Text>
          </>
        )}
        {esc.formula && (
          <>
            <Text className={styles.label}>Formula:</Text>
            <Text className={styles.mono}>{esc.formula}</Text>
          </>
        )}
        {esc.multipliers && (
          <>
            <Text className={styles.label}>Multipliers:</Text>
            <Text className={styles.mono}>{esc.multipliers}</Text>
          </>
        )}
        {esc.max_time !== null && (
          <>
            <Text className={styles.label}>Max time:</Text>
            <Text>{formatSeconds(esc.max_time)}</Text>
          </>
        )}
        {esc.rnd_time !== null && (
          <>
            <Text className={styles.label}>Random jitter:</Text>
            <Text>{formatSeconds(esc.rnd_time)}</Text>
          </>
        )}
        <Text className={styles.label}>Count across all jails:</Text>
        <Text>{esc.overall_jails ? "yes" : "no"}</Text>
      </div>
    </div>
  );
}