import { AntDesign } from "@expo/vector-icons";
import React, { useState } from "react";
import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";

interface StartButtonProps {
  title?: string;
  onPress?: () => void;
}

const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
  title = "Bắt đầu mẻ lưới",
  onPress,
}) => {
  const [isStarted, setIsStarted] = useState(false);

  const handlePress = () => {
    if (isStarted) {
      Alert.alert(
        "Kết thúc mẻ lưới",
        "Bạn có chắc chắn muốn kết thúc mẻ lưới này?",
        [
          {
            text: "Hủy",
            style: "cancel",
          },
          {
            text: "Kết thúc",
            onPress: () => {
              setIsStarted(false);
              Alert.alert("Thành công", "Đã kết thúc mẻ lưới!");
            },
          },
        ]
      );
    } else {
      Alert.alert("Bắt đầu mẻ lưới", "Bạn có muốn bắt đầu mẻ lưới mới?", [
        {
          text: "Hủy",
          style: "cancel",
        },
        {
          text: "Bắt đầu",
          onPress: () => {
            setIsStarted(true);
            Alert.alert("Thành công", "Đã bắt đầu mẻ lưới mới!");
          },
        },
      ]);
    }

    if (onPress) {
      onPress();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.button, isStarted && styles.buttonActive]}
      onPress={handlePress}
      activeOpacity={0.8}
    >
      <View style={styles.content}>
        <AntDesign
          name={isStarted ? "close" : "plus"}
          size={18}
          color="#fff"
          style={styles.icon}
        />
        <Text style={styles.text}>
          {isStarted ? "Kết thúc mẻ lưới" : title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#4ecdc4", // màu ngọc lam
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 16,
    alignSelf: "flex-start",
    shadowColor: "#000",
    shadowOpacity: 0.15,
    shadowRadius: 3,
    shadowOffset: { width: 0, height: 2 },
    elevation: 3, // hiệu ứng nổi trên Android
  },
  buttonActive: {
    backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
  },
  icon: {
    marginRight: 6,
  },
  text: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});

export default ButtonCreateNewHaulOrTrip;