import React from 'react'
import { View, Text, Image, SafeAreaView, TouchableOpacity } from 'react-native'

import { colors, TextColors } from '../Colors'
import { TextStyles } from '../Styles'
import manifest from '../appManifest'
import { Carousel } from '../components/Carousel'
import {
  EventType,
  useAnalytics,
  sendAnalyticsEvent,
} from '../hooks/useAnalytics'
import { Strings } from '../i18n'
import { defaultTimeInterval } from '../types/TimeInterval'
import { ContentItem } from '../util/getLoginCarouselContent'

const LoginCarouselItem: React.FC<{
  index: number
  item: ContentItem
}> = ({ index, item }) => (
  <View
    key={index}
    style={{
      flex: 1,
      justifyContent: 'space-between',
      alignContent: 'center',
      paddingBottom: 50,
    }}
  >
    <Text
      style={{
        ...TextStyles.h4,
        color: TextColors.default,
        textAlign: 'center',
        marginHorizontal: 70,
        flexShrink: 0,
      }}
    >
      {item.text}
    </Text>
    <Image
      source={item.image}
      resizeMode="contain"
      style={{
        maxWidth: '100%',
        paddingHorizontal: 75,
        flex: 1,
      }}
    />
    <Text
      style={{
        ...TextStyles.body,
        textAlign: 'center',
        marginHorizontal: 45,
        marginBottom: 10,
        flexShrink: 0,
      }}
    >
      {item.text2}
    </Text>
  </View>
)

export const LoginCarouselScreen: React.FC<{
  content: ContentItem[]
  onPressOk: (version: string) => void
}> = ({ content, onPressOk }) => {
  const currentVersion = manifest.version
  const timeInterval = defaultTimeInterval
  useAnalytics(
    EventType.LOGIN_CAROUSEL_VIEWED,
    {
      version: currentVersion,
      subject: 'user',
      verb: 'viewed',
      object: 'login_carousel',
    },
    true,
    timeInterval
  )
  const sendTabAnalytics = (rank: number) =>
    sendAnalyticsEvent(EventType.LOGIN_CAROUSEL_SWIPED, {
      rank,
      subject: 'user',
      verb: 'swiped',
      object: 'login_carousel',
    })

  return (
    <SafeAreaView style={{ backgroundColor: colors.black, flex: 1 }}>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 45,
          marginBottom: 23,
        }}
      >
        <Image
          source={require('../../assets/sma-wave.png')}
          style={{ width: 53, height: 53 }}
        />
      </View>
      <Carousel<ContentItem>
        items={content}
        renderItem={LoginCarouselItem}
        onSwipe={(_, rank) => sendTabAnalytics(rank)}
        style={{
          flex: 1,
        }}
      />
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 20,
          marginBottom: 30,
        }}
      >
        <TouchableOpacity
          onPress={() => {
            sendAnalyticsEvent(EventType.LOGIN_CAROUSEL_DISMISSED, {
              subject: 'user',
              verb: 'dismissed',
              object: 'login_carousel',
            })
            onPressOk(currentVersion)
          }}
        >
          <Text style={{ ...TextStyles.body, color: colors.midWhite }}>
            {Strings.Shared.Skip}
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}

// Onboarding carousel items
export const onBoardingContent = [
  {
    image: require('../../assets/login/onboarding/welcome2x.png'),
    ...Strings.Onboarding.Welcome,
  },
  {
    image: require('../../assets/login/onboarding/globe2x.png'),
    ...Strings.Onboarding.GlobalView,
  },
  {
    image: require('../../assets/login/onboarding/insight-graphs2x.png'),
    ...Strings.Onboarding.PowerfulDetails,
  },
  {
    image: require('../../assets/login/onboarding/social2x.png'),
    ...Strings.Onboarding.SocialFollowing,
  },
  {
    image: require('../../assets/login/onboarding/hit-list-view2x.png'),
    ...Strings.Onboarding.QuickHits,
  },
]