import React from 'react';
import { View, ScrollView, Text, Animated, Dimensions } from 'react-native';
import { Icon } from 'react-native-elements';

import TagferAvatar from '../new/TagferAvatar';
import EditButton from './EditButton';
import OptionsMenu from './OptionsMenu';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCROLL_X = new Animated.Value(0);

const ProfileHeader = ({ photoURL, fullName, tagferId, jobTitle, companyName, companyLocation, setOptionsMenu, showOptionsMenu }) => {
  const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { x: SCROLL_X } } }]
  );

  return (
    <View>
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onScroll={onScroll}
        scrollEventThrottle={16}
      >
        {/* SWIPE SCREEN 1 */}
        <View style={{ width: SCREEN_WIDTH }}>
          {/* BUTTONS SECTION */}
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <OptionsMenu
              setMenu={setOptionsMenu}
              showMenu={showOptionsMenu}
            />
            <View style={{ marginTop: 8, marginRight: 5 }}>
              <EditButton size={24} />
            </View>
          </View>
          {/* PROFILE CONTENT SECTION */}
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TagferAvatar size='large' color='#53ACF060' photoURL={photoURL} />
            <Text style={{ fontSize: 22, fontWeight: '600', marginTop: 5 }}>{fullName}</Text>
            <Text style={{ fontSize: 18, marginBottom: 8, fontWeight: '400' }}>@{tagferId}</Text>
            <Text style={{ fontSize: 14 }}>{jobTitle} at {companyName}</Text>
            <Text style={{ fontSize: 14, marginBottom: 20, color: '#535353' }}>{companyLocation}</Text>
          </View>
        </View>

        {/* SWIPE SCREEN 2 */}
        <View style={{ width: SCREEN_WIDTH, alignItems: 'center', marginVertical: 10 }}>
          <Icon type='font-awesome' name='id-card' size={180} color='#53ACF040' />
        </View>
      </ScrollView>

      <SwiperDots />
    </View>
  );
};

const SwiperDots = () => {
  const position = Animated.divide(SCROLL_X, SCREEN_WIDTH);
  const opacity = (i) => position.interpolate({
    inputRange: [i - 1, i, i + 1],
    outputRange: [0.3, 1, 0.3],
    extrapolate: 'clamp'
  });

  return (
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
      <Animated.View
        key={'swiperDot0'}
        style={{ opacity: opacity(0), height: 7, width: 7, backgroundColor: '#595959', margin: 3, borderRadius: 3 }}
      />

      <Animated.View
        key={'swiperDot1'}
        style={{ opacity: opacity(1), height: 7, width: 7, backgroundColor: '#595959', margin: 3, borderRadius: 3 }}
      />
    </View>
  );
};

export default ProfileHeader;
