import Ionicons from "@expo/vector-icons/Ionicons";
import React, { useCallback, useMemo } from "react";
import { Text, View } from "react-native";
import { TabButton } from "./TabButton";

// Memoized buton komponenti
const NumpadButton = React.memo(
  ({
    value,
    label,
    onPress,
    onLongPress,
  }: {
    value: string;
    label: string | null;
    onPress: (value: string) => void;
    onLongPress?: (value: string) => void;
  }) => {
    const handlePress = useCallback(
      () => onPress(value),
      [onPress, value]
    );
    const handleLongPress = useCallback(
      () => onLongPress?.(value),
      [onLongPress, value]
    );

    return (
      <TabButton
        onPress={handlePress}
        onLongPress={onLongPress ? handleLongPress : undefined}
        className="h-20 flex-1 rounded-none border-0 active:bg-gray-100"
      >
        {value === "delete" ? (
          <Ionicons name="backspace-outline" size={30} color="black" />
        ) : (
          <Text className="text-center text-3xl font-bold text-black">
            {label}
          </Text>
        )}
      </TabButton>
    );
  }
);

NumpadButton.displayName = "NumpadButton";

// Satır komponenti
const NumpadRow = React.memo(
  ({
    buttons,
    onPress,
    onLongPress,
  }: {
    buttons: readonly { value: string; label: string | null }[];
    onPress: (value: string) => void;
    onLongPress?: (value: string) => void;
  }) => (
    <View className="flex-row">
      {buttons.map((button) => (
        <NumpadButton
          key={button.value}
          value={button.value}
          label={button.label}
          onPress={onPress}
          onLongPress={button.value === "delete" ? onLongPress : undefined}
        />
      ))}
    </View>
  )
);

NumpadRow.displayName = "NumpadRow";

export const Numpad = React.memo(
  ({
    setPrice,
    decimalSeparator = ".",
  }: {
    setPrice: React.Dispatch<React.SetStateAction<string>>;
    decimalSeparator?: string;
  }) => {
    const NUMPAD_BUTTONS = useMemo(
      () => [
        [
          { value: "1", label: "1" },
          { value: "2", label: "2" },
          { value: "3", label: "3" },
        ],
        [
          { value: "4", label: "4" },
          { value: "5", label: "5" },
          { value: "6", label: "6" },
        ],
        [
          { value: "7", label: "7" },
          { value: "8", label: "8" },
          { value: "9", label: "9" },
        ],
        [
          { value: ".", label: decimalSeparator },
          { value: "0", label: "0" },
          { value: "delete", label: null },
        ],
      ],
      [decimalSeparator]
    );
    const handleNumPadPress = useCallback(
      (value: string, isLongPress?: boolean) => {
        setPrice((prev) => {
          if (value === "delete") {
            return isLongPress ? "" : prev.slice(0, -1);
          }

          // Nokta kontrolü
          if (value === "." && prev.includes(".")) {
            return prev;
          }

          // Ondalık basamak kontrolü
          if (value !== "." && prev.includes(".")) {
            const decimalIndex = prev.indexOf(".");
            const decimalPart = prev.slice(decimalIndex + 1);
            if (decimalPart.length >= 2) {
              return prev;
            }
          }
          if (prev === "0") return value;

          return prev + value;
        });
      },
      [setPrice]
    );

    // Long press handler'ı ayrı tanımla
    const handleLongPress = useCallback(
      (value: string) => handleNumPadPress(value, true),
      [handleNumPadPress]
    );

    // Satırları memoize et
    const numpadRows = useMemo(
      () =>
        NUMPAD_BUTTONS.map((row, index) => (
          <NumpadRow
            key={index}
            buttons={row}
            onPress={handleNumPadPress}
            onLongPress={handleLongPress}
          />
        )),
      [handleNumPadPress, handleLongPress]
    );

    return <View className="">{numpadRows}</View>;
  }
);

Numpad.displayName = "Numpad";