sgw-owner-app/components/diary/FilterModal.tsx

import React, { useState } from "react";
import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  StyleSheet,
  Platform,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import StatusDropdown from "./StatusDropdown";
import DateRangePicker from "./DateRangePicker";
import ShipDropdown from "./ShipDropdown";
import { TripStatus } from "./types";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";

// Map status number to string - now uses i18n
export function useMapStatusNumberToString() {
  const { t } = useI18n();
  
  return (status: TripStatus | null): string => {
    switch (status) {
      case 0:
        return t("diary.tripStatus.created");
      case 1:
        return t("diary.tripStatus.pending");
      case 2:
        return t("diary.tripStatus.approved");
      case 3:
        return t("diary.tripStatus.departed");
      case 4:
        return t("diary.tripStatus.completed");
      case 5:
        return t("diary.tripStatus.cancelled");
      default:
        return "-";
    }
  };
}

interface FilterModalProps {
  visible: boolean;
  onClose: () => void;
  onApply: (filters: FilterValues) => void;
}

export interface ShipOption {
  id: string;
  shipName: string;
}

export interface FilterValues {
  status: TripStatus | null; // number (0-5) hoặc null
  startDate: Date | null;
  endDate: Date | null;
  selectedShip: ShipOption | null; // Tàu được chọn
}

export default function FilterModal({
  visible,
  onClose,
  onApply,
}: FilterModalProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
  const mapStatusNumberToString = useMapStatusNumberToString();
  const [status, setStatus] = useState<TripStatus | null>(null);
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [selectedShip, setSelectedShip] = useState<ShipOption | null>(null);

  const handleReset = () => {
    setStatus(null);
    setStartDate(null);
    setEndDate(null);
    setSelectedShip(null);
  };

  const handleApply = () => {
    onApply({ status, startDate, endDate, selectedShip });
    onClose();
  };

  const hasFilters =
    status !== null ||
    startDate !== null ||
    endDate !== null ||
    selectedShip !== null;

  const themedStyles = {
    modalContainer: {
      backgroundColor: colors.card,
    },
    header: {
      borderBottomColor: colors.separator,
    },
    title: {
      color: colors.text,
    },
    previewContainer: {
      backgroundColor: colors.backgroundSecondary,
    },
    previewTitle: {
      color: colors.textSecondary,
    },
    filterTag: {
      backgroundColor: colors.primary + '20', // 20% opacity
    },
    filterTagText: {
      color: colors.primary,
    },
    footer: {
      borderTopColor: colors.separator,
    },
    resetButton: {
      backgroundColor: colors.backgroundSecondary,
    },
    resetButtonText: {
      color: colors.textSecondary,
    },
    applyButton: {
      backgroundColor: colors.primary,
    },
  };

  return (
    <Modal
      visible={visible}
      animationType="fade"
      transparent
      onRequestClose={onClose}
    >
      <TouchableOpacity
        style={styles.overlay}
        activeOpacity={1}
        onPress={onClose}
      >
        <TouchableOpacity
          style={[styles.modalContainer, themedStyles.modalContainer]}
          activeOpacity={1}
          onPress={(e) => e.stopPropagation()}
        >
          {/* Header */}
          <View style={[styles.header, themedStyles.header]}>
            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
              <Ionicons name="close" size={24} color={colors.text} />
            </TouchableOpacity>
            <Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
            <View style={styles.placeholder} />
          </View>

          {/* Content */}
          <ScrollView
            style={styles.content}
            showsVerticalScrollIndicator={false}
          >
            <StatusDropdown value={status} onChange={setStatus} />
            <DateRangePicker
              startDate={startDate}
              endDate={endDate}
              onStartDateChange={setStartDate}
              onEndDateChange={setEndDate}
            />
            <ShipDropdown value={selectedShip} onChange={setSelectedShip} />

            {/* Filter Results Preview */}
            {hasFilters && (
              <View style={[styles.previewContainer, themedStyles.previewContainer]}>
                <Text style={[styles.previewTitle, themedStyles.previewTitle]}>{t("diary.selectedFilters")}</Text>
                {status !== null && (
                  <View style={[styles.filterTag, themedStyles.filterTag]}>
                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                      {t("diary.statusLabel")} {mapStatusNumberToString(status)}
                    </Text>
                  </View>
                )}
                {startDate && (
                  <View style={[styles.filterTag, themedStyles.filterTag]}>
                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                      {t("diary.fromLabel")} {startDate.toLocaleDateString("vi-VN")}
                    </Text>
                  </View>
                )}
                {endDate && (
                  <View style={[styles.filterTag, themedStyles.filterTag]}>
                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                      {t("diary.toLabel")} {endDate.toLocaleDateString("vi-VN")}
                    </Text>
                  </View>
                )}
                {selectedShip && (
                  <View style={[styles.filterTag, themedStyles.filterTag]}>
                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                      {t("diary.shipLabel")} {selectedShip.shipName}
                    </Text>
                  </View>
                )}
              </View>
            )}
          </ScrollView>

          {/* Footer */}
          <View style={[styles.footer, themedStyles.footer]}>
            <TouchableOpacity
              style={[styles.resetButton, themedStyles.resetButton]}
              onPress={handleReset}
              activeOpacity={0.7}
            >
              <Text style={[styles.resetButtonText, themedStyles.resetButtonText]}>{t("diary.reset")}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.applyButton, themedStyles.applyButton]}
              onPress={handleApply}
              activeOpacity={0.7}
            >
              <Text style={styles.applyButtonText}>{t("diary.apply")}</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}


const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end",
  },
  modalContainer: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    maxHeight: "80%",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: -4,
    },
    shadowOpacity: 0.1,
    shadowRadius: 12,
    elevation: 8,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
  },
  closeButton: {
    padding: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: "700",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  placeholder: {
    width: 32,
  },
  content: {
    padding: 20,
  },
  previewContainer: {
    marginTop: 20,
    padding: 16,
    borderRadius: 12,
  },
  previewTitle: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 12,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  filterTag: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    marginBottom: 8,
    alignSelf: "flex-start",
  },
  filterTagText: {
    fontSize: 14,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  footer: {
    flexDirection: "row",
    gap: 12,
    padding: 20,
    borderTopWidth: 1,
  },
  resetButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
  },
  resetButtonText: {
    fontSize: 16,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  applyButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
  },
  applyButtonText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#FFFFFF",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});