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

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

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

const EventsNotificationsScreen = ({ route }: { route: any }) => {
  const [isHomecountrySubscribed, setIsHomecountrySubscribed] = useState(false);
  const [isHomecountry2Subscribed, setIsHomecountry2Subscribed] = useState(false);
  const settings = route.params?.settings;
  const token = route.params?.token;
  const { mutateAsync: setNotificationsSettings } = usePostSetSettingsMutation();

  useEffect(() => {
    const emailHomecountry = settings.find(
      (setting: any) => setting.name === 'email-new-homecountry-event'
    );
    const emailHomecountry2 = settings.find(
      (setting: any) => setting.name === 'email-new-homecountry2-event'
    );

    setIsHomecountrySubscribed(emailHomecountry?.active === 1);
    setIsHomecountry2Subscribed(emailHomecountry2?.active === 1);
  }, [settings]);

  const handleToggleHomecountry = () => {
    setIsHomecountrySubscribed(!isHomecountrySubscribed);
    updateSettings('email-new-homecountry-event', isHomecountrySubscribed ? 0 : 1);
  };

  const handleToggleHomecountry2 = () => {
    setIsHomecountry2Subscribed(!isHomecountry2Subscribed);
    updateSettings('email-new-homecountry2-event', isHomecountry2Subscribed ? 0 : 1);
  };

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

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

  return (
    <PageWrapper>
      <Header label="Events" />
      <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={handleToggleHomecountry}
      >
        <Text
          style={[styles.buttonLabel, !isHomecountrySubscribed ? { color: Colors.LIGHT_GRAY } : {}]}
        >
          Emails about events in home country
        </Text>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={handleToggleHomecountry}
            value={isHomecountrySubscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
        onPress={handleToggleHomecountry2}
      >
        <Text
          style={[
            styles.buttonLabel,
            !isHomecountry2Subscribed ? { color: Colors.LIGHT_GRAY } : {}
          ]}
        >
          Emails about events in second home country
        </Text>
        <View>
          <Switch
            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
            thumbColor={Colors.WHITE}
            onValueChange={handleToggleHomecountry2}
            value={isHomecountry2Subscribed}
            style={{ transform: 'scale(0.8)' }}
          />
        </View>
      </TouchableOpacity>
    </PageWrapper>
  );
};

export default EventsNotificationsScreen;
