"use strict";

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Modal, Platform, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useThemeStyles } from '../../hooks/useThemeStyles';
import { useColorScheme } from '../../hooks/use-color-scheme';
import { useI18n } from '../../hooks/useI18n';
import { fontFamilies } from '../../styles/fonts';
import { useProfileEditing } from '../../hooks/useProfileEditing';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const EditLocationModal = ({
  visible,
  onClose,
  initialLocations = [],
  theme = 'light',
  onSave
}) => {
  const {
    t
  } = useI18n();
  const colorScheme = useColorScheme();
  const themeStyles = useThemeStyles(theme || 'light', colorScheme);
  const colors = themeStyles.colors;
  const {
    saveProfile,
    isSaving
  } = useProfileEditing();
  const [locations, setLocations] = useState(initialLocations);
  const [newLocation, setNewLocation] = useState('');
  useEffect(() => {
    if (visible) {
      setLocations(initialLocations);
      setNewLocation('');
    }
  }, [visible, initialLocations]);
  const handleAddLocation = () => {
    if (!newLocation.trim()) return;
    const location = {
      id: `location-${Date.now()}`,
      name: newLocation.trim()
    };
    setLocations([...locations, location]);
    setNewLocation('');
  };
  const handleRemoveLocation = id => {
    setLocations(locations.filter(loc => loc.id !== id));
  };
  const handleSave = async () => {
    const success = await saveProfile({
      locations
    });
    if (success) {
      onSave?.();
      onClose();
    }
  };
  return /*#__PURE__*/_jsx(Modal, {
    visible: visible,
    animationType: "slide",
    transparent: true,
    onRequestClose: onClose,
    children: /*#__PURE__*/_jsx(View, {
      style: styles.modalOverlay,
      children: /*#__PURE__*/_jsxs(View, {
        style: [styles.modalContent, {
          backgroundColor: colors.background
        }],
        children: [/*#__PURE__*/_jsxs(View, {
          style: styles.modalHeader,
          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: onClose,
            style: styles.closeButton,
            children: /*#__PURE__*/_jsx(Ionicons, {
              name: "close",
              size: 24,
              color: colors.text
            })
          }), /*#__PURE__*/_jsx(Text, {
            style: [styles.modalTitle, {
              color: colors.text
            }],
            children: t('editProfile.items.locations.title') || 'Locations'
          }), /*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: handleSave,
            disabled: isSaving,
            style: [styles.saveButton, {
              opacity: isSaving ? 0.5 : 1
            }],
            children: /*#__PURE__*/_jsx(Text, {
              style: [styles.saveButtonText, {
                color: colors.tint
              }],
              children: isSaving ? 'Saving...' : 'Save'
            })
          })]
        }), /*#__PURE__*/_jsxs(ScrollView, {
          style: styles.modalBody,
          children: [/*#__PURE__*/_jsxs(View, {
            style: styles.inputGroup,
            children: [/*#__PURE__*/_jsx(Text, {
              style: [styles.label, {
                color: colors.text
              }],
              children: t('editProfile.items.locations.add') || 'Add Location'
            }), /*#__PURE__*/_jsxs(View, {
              style: styles.addLocationRow,
              children: [/*#__PURE__*/_jsx(TextInput, {
                style: [styles.input, {
                  backgroundColor: colors.card,
                  color: colors.text,
                  borderColor: colors.border,
                  flex: 1
                }],
                value: newLocation,
                onChangeText: setNewLocation,
                placeholder: t('editProfile.items.locations.placeholder') || 'Enter location name',
                placeholderTextColor: colors.secondaryText,
                selectionColor: colors.tint
              }), /*#__PURE__*/_jsx(TouchableOpacity, {
                style: [styles.addButton, {
                  backgroundColor: colors.tint
                }],
                onPress: handleAddLocation,
                disabled: !newLocation.trim(),
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "add",
                  size: 20,
                  color: "#fff"
                })
              })]
            })]
          }), locations.length > 0 && /*#__PURE__*/_jsxs(View, {
            style: styles.locationsList,
            children: [/*#__PURE__*/_jsxs(Text, {
              style: [styles.listTitle, {
                color: colors.text
              }],
              children: [t('editProfile.items.locations.yourLocations') || 'Your Locations', " (", locations.length, ")"]
            }), locations.map((location, index) => /*#__PURE__*/_jsxs(View, {
              style: [styles.locationItem, {
                backgroundColor: colors.card,
                borderColor: colors.border
              }, index < locations.length - 1 && {
                borderBottomWidth: StyleSheet.hairlineWidth
              }],
              children: [/*#__PURE__*/_jsx(Text, {
                style: [styles.locationName, {
                  color: colors.text
                }],
                children: location.name
              }), /*#__PURE__*/_jsx(TouchableOpacity, {
                onPress: () => handleRemoveLocation(location.id),
                style: styles.removeButton,
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "trash-outline",
                  size: 18,
                  color: "#FF3B30"
                })
              })]
            }, location.id))]
          })]
        })]
      })
    })
  });
};
const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end'
  },
  modalContent: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: Platform.OS === 'ios' ? 20 : 16,
    maxHeight: '80%'
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#E5E5EA'
  },
  closeButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center'
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    fontFamily: fontFamilies.phuduSemiBold,
    flex: 1,
    textAlign: 'center'
  },
  saveButton: {
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  saveButtonText: {
    fontSize: 16,
    fontWeight: '600',
    fontFamily: fontFamilies.phuduSemiBold
  },
  modalBody: {
    padding: 16
  },
  inputGroup: {
    gap: 8,
    marginBottom: 24
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    fontFamily: fontFamilies.phuduSemiBold
  },
  addLocationRow: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center'
  },
  input: {
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    minHeight: 52
  },
  addButton: {
    width: 52,
    height: 52,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center'
  },
  locationsList: {
    gap: 8
  },
  listTitle: {
    fontSize: 16,
    fontWeight: '600',
    fontFamily: fontFamilies.phuduSemiBold,
    marginBottom: 8
  },
  locationItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderRadius: 12,
    borderWidth: StyleSheet.hairlineWidth
  },
  locationName: {
    fontSize: 16,
    flex: 1
  },
  removeButton: {
    padding: 8
  }
});
//# sourceMappingURL=EditLocationModal.js.map