import React from "react";

import { View, Text } from "react-native";

import { isWithinLimit } from "../../utils/isWithinLimit";
import type { generateStyles } from "../TimerPicker/styles";

interface PickerItemProps {
  adjustedLimitedMax: number;
  adjustedLimitedMin: number;
  allowFontScaling: boolean;
  amLabel?: string;
  is12HourPicker?: boolean;
  isAmPmPicker?: boolean;
  isItemDisabled?: (value: number) => boolean;
  item: string;
  pickerAmPmPositionStyle?: { left: "50%"; marginLeft: number };
  pmLabel?: string;
  selectedValue?: number;
  separateAmPmPicker?: boolean;
  styles: ReturnType<typeof generateStyles>;
}

const PickerItem = React.memo<PickerItemProps>(
  ({
    adjustedLimitedMax,
    adjustedLimitedMin,
    allowFontScaling,
    amLabel,
    is12HourPicker,
    isAmPmPicker,
    isItemDisabled,
    item,
    pickerAmPmPositionStyle,
    pmLabel,
    selectedValue,
    separateAmPmPicker,
    styles,
  }) => {
    let stringItem = item;
    let intItem: number;
    let isAm: boolean | undefined;

    if (isAmPmPicker) {
      // Compare to the amLabel/pmLabel passed in; padding rows are empty strings.
      if (item === amLabel) {
        intItem = 0;
      } else if (item === pmLabel) {
        intItem = 1;
      } else {
        intItem = NaN;
      }
    } else if (is12HourPicker && separateAmPmPicker) {
      // Hour column in clock-face form (12, 1, 2, ..., 11). The "12" slot is hourSlot 0
      // (noon/midnight); every other display value matches its slot index.
      const parsed = parseInt(item);
      intItem = isNaN(parsed) ? NaN : parsed === 12 ? 0 : parsed;
    } else if (is12HourPicker) {
      isAm = item.includes("AM");
      stringItem = item.replace(/\s[AP]M/g, "");
      intItem = parseInt(stringItem);

      // map 12-hour display value back to 24-hour for limit comparison
      if (!isAm && intItem !== 12) {
        intItem += 12;
      } else if (isAm && intItem === 12) {
        intItem = 0;
      }
    } else {
      intItem = parseInt(item);
    }

    const isSelected = !isNaN(intItem) && intItem === selectedValue;

    let isDisabled: boolean;
    if (isAmPmPicker) {
      // AM/PM is always freely toggleable; the hour column does all limit enforcement.
      isDisabled = false;
    } else if (isItemDisabled) {
      isDisabled = !isNaN(intItem) && isItemDisabled(intItem);
    } else {
      isDisabled = !isWithinLimit(intItem, adjustedLimitedMin, adjustedLimitedMax);
    }

    return (
      <View key={item} style={styles.pickerItemContainer} testID="picker-item">
        <Text
          allowFontScaling={allowFontScaling}
          style={[
            styles.pickerItem,
            isSelected && styles.selectedPickerItem,
            isDisabled ? styles.disabledPickerItem : {},
            isAmPmPicker && styles.separateAmPmItem,
            isAmPmPicker && isSelected && styles.selectedSeparateAmPmItem,
          ]}
        >
          {stringItem}
        </Text>
        {is12HourPicker && !separateAmPmPicker && (
          <View style={[styles.pickerAmPmContainer, pickerAmPmPositionStyle]}>
            <Text allowFontScaling={allowFontScaling} style={styles.pickerAmPmLabel}>
              {isAm ? amLabel : pmLabel}
            </Text>
          </View>
        )}
      </View>
    );
  }
);

export default PickerItem;