import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, Platform,Dimensions  } from 'react-native';
import { FontAwesome, MaterialIcons, Entypo, FontAwesome5, FontAwesome6, Ionicons } from '@expo/vector-icons';
import tw from 'twrnc';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router'; 
import { useUserAccess } from './_layout';

const Settings = () => {
  const { userData,userAccess } = useUserAccess();
  const router = useRouter(); 
  const menuItems = [
    {
      icon: <Ionicons name="calendar-number" size={24} color="#E27953" />,
      title: "Daily Attendance",
      subtitle: "Check Present & Absent List",
      link: `/reports/attendance?userData=${JSON.stringify(userData)}&userAccess=${JSON.stringify(userAccess)}`
    },
    userAccess?.module?.some((item) => item?.FK_ModuleId == 2 && item?.read == 1) && {
      icon: <FontAwesome5 name="user-shield" size={24} color="#E27953" />,
      title: "Manage Role",
      subtitle: "Add Remove Role For Users",
      link: `/RoleManager/ManageRole?userData=${JSON.stringify(userData)}&userAccess=${JSON.stringify(userAccess)}`
    },
    userAccess?.module?.some((item) => item?.FK_ModuleId === 4 && item?.read == 1) && {
      icon: <FontAwesome6 name="users-gear" size={24} color="#E27953" />,
      title: "Manage Users",
      subtitle: "Manage Users",
      link: `/User/ManageUsers?userData=${JSON.stringify(userData)}&userAccess=${JSON.stringify(userAccess)}`
    }
  ].filter(Boolean);

  return (
    <View style={[tw`flex-1 bg-[#f6f6f6] justify-center   pt-2 ${Platform.OS == 'web'?'items-center p-5':'p-2'} `,]}>
      {/* Menu Items */}
      <ScrollView contentContainerStyle={tw`p-4 h-full rounded-lg bg-white shadow- ${Platform.OS == 'web'?'w-[1280px] ':''} `}> 
        {menuItems.map((item, index) => (
          <TouchableOpacity
            key={index}
            activeOpacity={0.9} // Adjust the opacity on press
            onPress={() => router.push(item.link)}
            style={tw`flex-row items-center bg-[#edf6f9] rounded-lg p-3 mb-4 shadow-md`}>
            <View style={tw`mr-4`}>{item.icon}</View>
            <View style={tw`flex-1`}>
              <Text style={tw`text-base font-semibold text-[16px]`}>{item.title}</Text>
              <Text style={tw`text-gray-500 text-sm text-[14px]`}>{item.subtitle}</Text>
            </View>
            <MaterialIcons name="chevron-right" size={25} color="#E27953" />
          </TouchableOpacity>
        ))}        
    </ScrollView>
    </View>
  );
};

export default Settings;