import React, { useEffect, useState } from 'react';
import { View, Text, Switch, TouchableOpacity } from 'react-native';

import { styles } from './styles';
import { Colors } from 'src/theme';

import { Header, PageWrapper } from 'src/components';
import { usePostSetSettingsMutation } from '@api/notifications';

const FriendsNotificationsScreen = ({ route }: { route: any }) => {
  const [isAppFriendsSubscribed, setIsAppFriendsSubscribed] = useState(false);
  const [isEmailFriendsSubscribed, setIsEmailFriendsSubscribed] = useState(false);
  const settings = route.params?.settings;
  const token = route.params?.token;
  const { mutateAsync: setNotificationsSettings } = usePostSetSettingsMutation();

  useEffect(() => {
    const appFriendsSetting = settings.find((setting: any) => setting.name === 'app-friends');
    const emailFriendsSetting = settings.find((setting: any) => setting.name === 'email-friends');

    setIsAppFriendsSubscribed(appFriendsSetting?.active === 1);
    setIsEmailFriendsSubscribed(emailFriendsSetting?.active === 1);
  }, [settings]);

  const handleToggleAppFriends = () => {
    setIsAppFriendsSubscribed(!isAppFriendsSubscribed);
    updateSettings('app-friends', isAppFriendsSubscribed ? 0 : 1);
  };

  const handleToggleEmailFriends = () => {
    setIsEmailFriendsSubscribed(!isEmailFriendsSubscribed);
    updateSettings('email-friends', isEmailFriendsSubscribed ? 0 : 1);
  };

  const updateSettings = async (settingName: string, active: number) => {
    const dataToUpdate = { [settingName]: active };

    await setNotificationsSettings({
      token,
      settings: JSON.stringify(dataToUpdate)
    });
  };

  return (
    <PageWrapper>
      <Header label="Friends" />
      <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={handleToggleAppFriends}
      >
        <View style={styles.alignStyle}>
          <Text
            style={[
              styles.buttonLabel,
              !isAppFriendsSubscribed ? { color: Colors.LIGHT_GRAY } : {}
            ]}
          >
            Friends notifications
          </Text>
        </View>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={handleToggleAppFriends}
            value={isAppFriendsSubscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={handleToggleEmailFriends}
      >
        <View style={styles.alignStyle}>
          <Text
            style={[
              styles.buttonLabel,
              !isEmailFriendsSubscribed ? { color: Colors.LIGHT_GRAY } : {}
            ]}
          >
            Friends email notifications
          </Text>
        </View>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={handleToggleEmailFriends}
            value={isEmailFriendsSubscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity>

      {/* <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={() => {}}
      >
        <View style={styles.alignStyle}>
          <Text style={[styles.buttonLabel, !isSubscribed ? { color: Colors.LIGHT_GRAY } : {}]}>
            Rejected requests
          </Text>
        </View>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={toggleSwitch}
            value={isSubscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity> */}

      {/* <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={() => {}}
      >
        <View style={styles.alignStyle}>
          <Text style={[styles.buttonLabel, !isSubscribed ? { color: Colors.LIGHT_GRAY } : {}]}>
            Approved requests
          </Text>
        </View>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={toggleSwitch}
            value={isSubscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity> */}
    </PageWrapper>
  );
};

export default FriendsNotificationsScreen;
