import { StyleSheet, View, TouchableOpacity, Dimensions } from 'react-native';
import { Text } from '@/components/Themed';
import i18n from '@/i18n';
import { FontAwesome5 } from '@expo/vector-icons';
import ServiceCard from '@/components/ServiceCard';
import React, { useState } from 'react';
import CurrencyConverterModal from '@/components/CurrencyConverterModal';
import HotelBusinessCardModal from '@/components/HotelBusinessCardModal';
import LostKeyModal from '@/components/LostKeyModal';
import PhrasebookModal from '@/components/PhrasebookModal';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function ServicesScreen() {
  const [currencyModalVisible, setCurrencyModalVisible] = useState(false);
  const [hotelModalVisible, setHotelModalVisible] = useState(false);
  const [lostKeyModalVisible, setLostKeyModalVisible] = useState(false);
  const [phrasebookModalVisible, setPhrasebookModalVisible] = useState(false);
  const insets = useSafeAreaInsets();

  const services = [
    {
      title: i18n.t('Money'),
      name: 'currencyConverter',
      icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
      onPress: () => setCurrencyModalVisible(true),
    },
    // {
    //   title: i18n.t('Hotel'),
    //   name: 'hotelCard',
    //   icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
    //   onPress: () => setHotelModalVisible(true),
    // },
    {
      title: i18n.t('Lost room key'),
      name: 'lostKey',
      icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
      onPress: () => setLostKeyModalVisible(true),
    },
    {
      title: i18n.t('Phrasebook'),
      name: 'phrasebook',
      icon: <FontAwesome5 name="book" size={24} color="#D4AF37" />,
      onPress: () => setPhrasebookModalVisible(true),
    },
  ];

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Text style={styles.title}>{i18n.t('services')}</Text>

      <View style={styles.grid}>
        {services.map((service, index) => (
          <TouchableOpacity key={index} style={styles.cardContainer} onPress={service.onPress}>
            <ServiceCard title={service.title} icon={service.icon} />
          </TouchableOpacity>
        ))}
      </View>
      <CurrencyConverterModal
        visible={currencyModalVisible}
        onClose={() => setCurrencyModalVisible(false)}
      />
      <HotelBusinessCardModal
        visible={hotelModalVisible}
        onClose={() => setHotelModalVisible(false)}
      />
      <LostKeyModal
        visible={lostKeyModalVisible}
        onClose={() => setLostKeyModalVisible(false)}
      />
      <PhrasebookModal
        visible={phrasebookModalVisible}
        onClose={() => setPhrasebookModalVisible(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginVertical: 15,
    marginLeft: 15,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginLeft: 15,
  },
  cardContainer: {
    width: '50%',
    marginBottom: 15,
  },
});