import React, { useRef } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import ViewShot from 'react-native-view-shot';
import Share from 'react-native-share';

import { API_HOST } from 'src/constants';
import { AvatarWithInitials, Header, PageWrapper } from 'src/components';
import { adaptiveStyle, Colors } from 'src/theme';
import { ProfileStyles } from '../../TravellersScreen/Components/styles';

import Logo from 'assets/images/logo.svg';
import TickIcon from 'assets/icons/tick.svg';
import UNIcon from 'assets/icons/un_icon.svg';
import NMIcon from 'assets/icons/nm_icon.svg';
import UN25Icon from 'assets/icons/un-25.svg';
import UN50Icon from 'assets/icons/un-50.svg';
import UN75Icon from 'assets/icons/un-75.svg';
import UN100Icon from 'assets/icons/un-100.svg';
import UN150Icon from 'assets/icons/un-150.svg';
import { styles } from './styles';

const PreviewScreen = ({ route }: { route: any }) => {
  const data = route.params.data;
  const viewShotRef = useRef<ViewShot>(null);

  const handleCaptureAndShare = async () => {
    if (viewShotRef.current && viewShotRef.current.capture) {
      try {
        const uri = await viewShotRef.current.capture();
        if (uri) {
          await Share.open({ url: uri });
        }
      } catch (error) {
        console.error('Error capturing or sharing the view:', error);
      }
    }
  };

  return (
    <PageWrapper>
      <Header label={'Preview'} />

      <View style={styles.container}>
        <ViewShot ref={viewShotRef} style={styles.viewShot}>
          <View style={styles.imageContainer}>
            <View style={styles.imageWrapper}>
              <Image
                style={styles.usersMap}
                source={{
                  uri: `${API_HOST}/img/single_maps/${data.id}.png?random=${Date.now()}`,
                  cache: 'reload'
                }}
                resizeMode="cover"
              />
            </View>

            <View style={styles.pageWrapper}>
              <View style={styles.avatarWrapper}>
                {data.avatar ? (
                  <Image
                    style={styles.avatar}
                    source={{ uri: API_HOST + '/img/avatars/' + data.avatar }}
                  />
                ) : (
                  <AvatarWithInitials
                    text={`${data.first_name[0] ?? ''}${data.last_name[0] ?? ''}`}
                    flag={API_HOST + '/img/flags_new/' + data.flag1}
                    size={64}
                    borderColor={Colors.WHITE}
                  />
                )}
              </View>
              <View style={styles.userInfoSection}>
                <View style={styles.userNameSpacer} />
                <View style={styles.nameRow}>
                  <Text style={styles.headerText}>
                    {data.first_name} {data.last_name}
                  </Text>
                </View>

                <View style={styles.userInfo}>
                  <View style={styles.flagsContainer}>
                    <Image
                      source={{ uri: API_HOST + '/img/flags_new/' + data.flag1 }}
                      style={styles.countryFlag}
                    />
                    {data.flag2 && data.flag2 !== data.flag1 ? (
                      <Image
                        source={{ uri: API_HOST + '/img/flags_new/' + data.flag2 }}
                        style={styles.additionalFlag}
                      />
                    ) : null}
                    <View
                      style={[adaptiveStyle(ProfileStyles.badgesWrapper, {}), { marginLeft: 12 }]}
                    >
                      {data.auth ? <TickIcon /> : null}
                      {data.badge_un ? <UNIcon /> : null}
                      {data.badge_nm ? <NMIcon /> : null}
                      {data.badge_un_150 ? <UN150Icon /> : null}
                      {data.badge_un_100 ? <UN100Icon /> : null}
                      {data.badge_un_75 ? <UN75Icon /> : null}
                      {data.badge_un_50 ? <UN50Icon /> : null}
                      {data.badge_un_25 ? <UN25Icon /> : null}
                    </View>
                  </View>
                </View>
              </View>
            </View>

            <View style={styles.scoreContainer}>
              <View style={styles.rankingItem}>
                <View style={styles.rankingItemRow}>
                  <Logo width={20} height={20} />
                  <Text style={styles.rankingScore}>{data.scores?.rank_nm}</Text>
                </View>

                <View style={styles.rankingItemRow}>
                  <Image
                    source={{ uri: API_HOST + '/img/flags_new/' + data.flag1 }}
                    style={styles.flagImage}
                  />
                  <Text style={styles.rankingScore}>{data.scores?.rank_country}</Text>
                </View>
              </View>

              <View style={styles.rankingItem}>
                <Text style={styles.rankingScore}>{data.scores.score_nm}</Text>
                <Text style={styles.titleText}>NM</Text>
              </View>

              <View style={styles.rankingItem}>
                <Text style={styles.rankingScore}>{data.scores.score_un}</Text>
                <Text style={styles.titleText}>UN</Text>
              </View>
            </View>

            <View style={styles.nomadManiaContainer}>
              <Text style={styles.nomadManiaText}>NomadMania.com</Text>
            </View>
          </View>
        </ViewShot>
      </View>

      <TouchableOpacity style={styles.shareButton} onPress={handleCaptureAndShare}>
        <Text style={styles.shareButtonText}>Share</Text>
      </TouchableOpacity>
    </PageWrapper>
  );
};

export default PreviewScreen;
