// @refresh react
import React, {useEffect, useState} from 'react';
import {StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';
import {
  INTEGRATED_SOCIAL_LIST,
  PROFILE_CUTOUT_BOTTOM_Y,
  SOCIAL_LIST,
} from '../../constants';
import {AuthContext, ProfileContext} from '../../routes';
import {getLinkedSocials} from '../../services';
import {StatusBarHeight} from '../../utils';
import Tagg from './Tagg';

const {View, ScrollView, interpolate, Extrapolate} = Animated;
interface TaggsBarProps {
  y: Animated.Value<number>;
  profileBodyHeight: number;
  isProfileView: boolean;
}
const TaggsBar: React.FC<TaggsBarProps> = ({
  y,
  profileBodyHeight,
  isProfileView,
}) => {
  let [taggs, setTaggs] = useState<Object[]>([]);
  let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
  const context = isProfileView
    ? React.useContext(ProfileContext)
    : React.useContext(AuthContext);
  const {user, socialsNeedUpdate} = context;

  useEffect(() => {
    const loadData = async () => {
      getLinkedSocials(user.userId).then((linkedSocials) => {
        const unlinkedSocials = SOCIAL_LIST.filter(
          (s) => linkedSocials.indexOf(s) === -1,
        );
        let new_taggs = [];
        let i = 0;
        for (let social of linkedSocials) {
          new_taggs.push(
            <Tagg
              key={i}
              social={social}
              isProfileView={isProfileView}
              isLinked={true}
              isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
              setTaggsNeedUpdate={setTaggsNeedUpdate}
              setSocialDataNeedUpdate={socialsNeedUpdate}
              userId={user.userId}
            />,
          );
          i++;
        }
        for (let social of unlinkedSocials) {
          new_taggs.push(
            <Tagg
              key={i}
              social={social}
              isProfileView={isProfileView}
              isLinked={false}
              isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
              setTaggsNeedUpdate={setTaggsNeedUpdate}
              setSocialDataNeedUpdate={socialsNeedUpdate}
              userId={user.userId}
            />,
          );
          i++;
        }
        setTaggs(new_taggs);
        setTaggsNeedUpdate(false);
      });
    };

    if (taggsNeedUpdate) {
      /**
       * Triggering redundant call to the backend for now to make the app work.
       * TODO : Figure out a better way to get the updates social posts for the profile being visited.
       * Have an event triggered from ProfileProvider based on which we could make a call to backedn to get updated posts.
       */
      socialsNeedUpdate(INTEGRATED_SOCIAL_LIST);
      loadData();
    }
  }, [isProfileView, taggsNeedUpdate, user.userId]);

  const shadowOpacity: Animated.Node<number> = interpolate(y, {
    inputRange: [
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
    ],
    outputRange: [0, 0.2],
    extrapolate: Extrapolate.CLAMP,
  });
  const paddingTop: Animated.Node<number> = interpolate(y, {
    inputRange: [
      0,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
    ],
    outputRange: [20, 20, StatusBarHeight],
    extrapolate: Extrapolate.CLAMP,
  });
  const paddingBottom: Animated.Node<number> = interpolate(y, {
    inputRange: [
      0,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
    ],
    outputRange: [30, 30, 15],
    extrapolate: Extrapolate.CLAMP,
  });
  return (
    <View style={[styles.container, {shadowOpacity}]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{paddingTop, paddingBottom}}
        contentContainerStyle={styles.contentContainer}>
        {taggs}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowRadius: 10,
    shadowOffset: {width: 0, height: 2},
    zIndex: 1,
  },
  contentContainer: {
    alignItems: 'center',
    paddingHorizontal: 10,
  },
});

export default TaggsBar;