import { useState } from "react";
import { Pressable, ScrollView, StyleSheet, View } from "react-native";

import { ThemedText } from "../themed-text";

export type TagStateCallbackPayload = {
  isNormal: boolean;
  isWarning: boolean;
  isDangerous: boolean;
  isSos: boolean;
  isDisconected: boolean; // giữ đúng theo yêu cầu (1 'n')
};

type TagStateProps = {
  normalCount?: number;
  warningCount?: number;
  dangerousCount?: number;
  sosCount?: number;
  disconnectedCount?: number;
  onTagPress?: (selection: TagStateCallbackPayload) => void;
  className?: string;
};

export function TagState({
  normalCount = 0,
  warningCount = 0,
  dangerousCount = 0,
  sosCount = 0,
  disconnectedCount = 0,
  onTagPress,
  className = "",
}: TagStateProps) {
  // Quản lý trạng thái các tag ở cấp cha để trả về tổng hợp
  const [activeStates, setActiveStates] = useState({
    normal: false,
    warning: false,
    dangerous: false,
    sos: false,
    disconnected: false,
  });

  const toggleState = (state: keyof typeof activeStates) => {
    setActiveStates((prev) => {
      const next = { ...prev, [state]: !prev[state] };
      // Gọi callback với object tổng hợp sau khi cập nhật
      onTagPress?.({
        isNormal: next.normal,
        isWarning: next.warning,
        isDangerous: next.dangerous,
        isSos: next.sos,
        isDisconected: next.disconnected,
      });
      return next;
    });
  };

  const renderTag = (
    state: "normal" | "warning" | "dangerous" | "sos" | "disconnected",
    count: number,
    label: string,
    colors: {
      defaultBg: string;
      defaultBorder: string;
      defaultText: string;
      activeBg: string;
      activeBorder: string;
      activeText: string;
    }
  ) => {
    if (count === 0) return null;
    const pressed = activeStates[state];
    return (
      <Pressable
        key={state}
        onPress={() => toggleState(state)}
        style={[
          styles.tag,
          {
            backgroundColor: pressed ? colors.activeBg : colors.defaultBg,
            borderColor: pressed ? colors.activeBorder : colors.defaultBorder,
          },
        ]}
      >
        <ThemedText
          style={[
            styles.tagText,
            {
              color: pressed ? colors.activeText : colors.defaultText,
            },
          ]}
          type="defaultSemiBold"
        >
          {label}: {count}
        </ThemedText>
      </Pressable>
    );
  };

  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      <View className={className} style={styles.container}>
        {renderTag("normal", normalCount, "Bình thường", {
          defaultBg: "#FFFFFF",
          defaultBorder: "#22C55E",
          defaultText: "#22C55E",
          activeBg: "#22C55E",
          activeBorder: "#22C55E",
          activeText: "#FFFFFF",
        })}
        {renderTag("warning", warningCount, "Cảnh báo", {
          defaultBg: "#FFFFFF",
          defaultBorder: "#EAB308",
          defaultText: "#EAB308",
          activeBg: "#EAB308",
          activeBorder: "#EAB308",
          activeText: "#FFFFFF",
        })}
        {renderTag("dangerous", dangerousCount, "Nguy hiểm", {
          defaultBg: "#FFFFFF",
          defaultBorder: "#F97316",
          defaultText: "#F97316",
          activeBg: "#F97316",
          activeBorder: "#F97316",
          activeText: "#FFFFFF",
        })}
        {renderTag("sos", sosCount, "SOS", {
          defaultBg: "#FFFFFF",
          defaultBorder: "#EF4444",
          defaultText: "#EF4444",
          activeBg: "#EF4444",
          activeBorder: "#EF4444",
          activeText: "#FFFFFF",
        })}
        {renderTag("disconnected", disconnectedCount, "Mất kết nối", {
          defaultBg: "#FFFFFF",
          defaultBorder: "#6B7280",
          defaultText: "#6B7280",
          activeBg: "#6B7280",
          activeBorder: "#6B7280",
          activeText: "#FFFFFF",
        })}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    gap: 8,
    padding: 5,
  },
  tag: {
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 10,
    paddingVertical: 5,
    minWidth: 100,
    alignItems: "center",
  },
  tagText: {
    fontSize: 14,
    textAlign: "center",
  },
});
