import ButtonCancelTrip from "@/components/ButtonCancelTrip";
import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip";
import ButtonEndTrip from "@/components/ButtonEndTrip";
import CrewListTable from "@/components/tripInfo/CrewListTable";
import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
import NetListTable from "@/components/tripInfo/NetListTable";
import TripCostTable from "@/components/tripInfo/TripCostTable";
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function TripInfoScreen() {
  // const { trip, getTrip } = useTrip();
  // useEffect(() => {
  //   getTrip();
  // }, []);

  return (
    <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
      <View style={styles.header}>
        <Text style={styles.titleText}>Thông Tin Chuyến Đi</Text>
        <View style={styles.buttonWrapper}>
          <ButtonCreateNewHaulOrTrip />
        </View>
      </View>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.container}>
          <TripCostTable />
          <FishingToolsTable />
          <CrewListTable />
          <NetListTable />
          <View style={styles.buttonRow}>
            <ButtonCancelTrip />
            <ButtonEndTrip />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    paddingBottom: 5,
  },
  scrollContent: {
    flexGrow: 1,
  },
  header: {
    width: "100%",
    paddingHorizontal: 15,
    paddingTop: 15,
    paddingBottom: 10,
    alignItems: "center",
  },
  buttonWrapper: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  container: {
    alignItems: "center",
    paddingHorizontal: 15,
  },
  buttonRow: {
    flexDirection: "row",
    gap: 10,
    marginTop: 15,
    marginBottom: 15,
  },
  titleText: {
    fontSize: 32,
    fontWeight: "700",
    lineHeight: 40,
    paddingBottom: 10,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});