import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableWithoutFeedback} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from 'App/App';
import AsyncStorage from '@react-native-community/async-storage';
import AlphaNotice from '../components/AlphaNotice';
import BasicButton from '../components/BasicButton';
import {useTranslation} from 'react-i18next';
import {BottomMenu} from '../components/BottomMenu';
import Header from '../components/Header';
import global from '../styles';

const styles = StyleSheet.create({
  container: {
    ...global.container,
    flex: 1,
    textAlign: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.15)',
  },
  lastFetchRow: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  lastFetch: {
    color: 'hsl(0, 0%, 30%)',
    fontSize: 16,
    fontFamily: 'Ubuntu-R',
    marginRight: 8,
  },
  refreshIcon: {
    color: 'hsl(0, 0%, 30%)',
  },
  bubbleBox: {
    position: 'absolute',
    backgroundColor: 'white',
    flex: 1,
    paddingTop: 6,
    paddingBottom: 6,
    marginLeft: 18,
    marginRight: 18,
    borderRadius: 12,
    flexDirection: 'column',
    zIndex: 1,
  },
  bubbleText: {
    paddingLeft: 14,
    paddingRight: 14,
    fontFamily: 'Ubuntu-R',
  },
  bubbleActions: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 4,
    paddingBottom: 4,
  },
  firstBubble: {
    top: -6,
  },
  secondBubble: {
    top: 230,
  },
  thirdBubble: {
    bottom: 78,
  },
  next: {
    fontFamily: 'Ubuntu-R',
    color: 'hsl(167, 39%, 64%)',
  },
  done: {
    fontFamily: 'Ubuntu-R',
    color: 'hsl(167, 39%, 64%)',
  },
  nextIcon: {
    color: 'hsl(167, 39%, 64%)',
  },
  bubbleTriangle: {
    position: 'absolute',
    width: 0,
    height: 0,
    bottom: -24,
    borderTopColor: 'white',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftWidth: 24,
    borderRightWidth: 24,
    borderTopWidth: 24,
    alignSelf: 'center',
  },
  bubbleTriangleTop: {
    position: 'absolute',
    width: 0,
    height: 0,
    top: -24,
    transform: [{rotateX: '180deg'}],
    borderTopColor: 'white',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftWidth: 24,
    borderRightWidth: 24,
    borderTopWidth: 24,
    alignSelf: 'center',
  },
  bubbleTriangleLeft: {
    left: 100,
  },
  radiusContainer: {
    margin: 0,
    paddingTop: 16,
    paddingBottom: 64,
    alignItems: 'center',
    flex: 10,
  },
  radius1Icon: {
    position: 'absolute',
    top: 155,
    paddingLeft: 35,
    width: 100,
    height: 100,
    zIndex: 3,
  },
  radius1: {
    position: 'absolute',
    top: 120,
    borderRadius: 50,
    borderWidth: 5,
    borderColor: 'black',
    width: 100,
    height: 100,
    backgroundColor: 'hsl(167, 20%, 58%)',
  },
  radius2: {
    position: 'absolute',
    top: 60,
    borderRadius: 110,
    width: 220,
    height: 220,
    backgroundColor: 'rgba(135, 202, 187, 0.2)',
  },
  radius3: {
    borderRadius: 170,
    width: 340,
    height: 340,
    backgroundColor: 'rgba(133, 201, 186, 0.2)',
  },
  contacts: {
    color: '#595959',
    fontSize: 18,
    textAlign: 'center',
    fontFamily: 'Ubuntu-B',
    marginBottom: 300,
  },
  bottomButtonContainer: {
    paddingTop: 16,
    paddingBottom: 16,
    backgroundColor: 'hsl(0, 0%, 70%)',
  },
  buttonInfected: {
    backgroundColor: 'hsl(167, 35%, 58%)',
    borderColor: 'hsl(167, 35%, 58%)',
    borderRadius: 6,
    marginLeft: 16,
    marginRight: 16,
  },
  buttonInfectedTitle: {
    color: '#2c2c2c',
    letterSpacing: 1,
    textTransform: 'uppercase',
    fontSize: 14,
    fontFamily: 'Ubuntu-M',
  },
});

type HomeTourScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'HomeTour'
>;

export const HomeTour: React.FC<{
  navigation: HomeTourScreenNavigationProp;
}> = ({navigation}) => {
  const [step, setStep] = useState(1);
  const {t} = useTranslation();
  return (
    <View style={styles.container}>
      <Header />

      <View style={styles.lastFetchRow}>
        <Text style={styles.lastFetch}>
          {t('home.lastIdFetch')}: {t('home.today')} 11:04
        </Text>
        <Icon name="refresh-ccw" size={18} style={styles.refreshIcon} />
      </View>

      <View style={styles.radiusContainer}>
        {step === 1 && (
          <TouchableWithoutFeedback onPress={(): void => setStep(2)}>
            <View style={[styles.bubbleBox, styles.firstBubble]}>
              <Text style={styles.bubbleText}>{t('homeTour.circle')}</Text>
              <View style={styles.bubbleActions}>
                <Text style={styles.next}>{t('homeTour.next')}</Text>
                <Icon name="chevron-right" size={18} style={styles.nextIcon} />
              </View>
              <View style={styles.bubbleTriangle} />
            </View>
          </TouchableWithoutFeedback>
        )}
        {step === 2 && (
          <TouchableWithoutFeedback onPress={(): void => setStep(3)}>
            <View style={[styles.bubbleBox, styles.secondBubble]}>
              <View style={styles.bubbleTriangleTop} />
              <Text style={styles.bubbleText}>{t('homeTour.pause')}</Text>
              <View style={styles.bubbleActions}>
                <Text style={styles.done}>{t('homeTour.next')}</Text>
                <Icon name="chevron-right" size={18} style={styles.nextIcon} />
              </View>
            </View>
          </TouchableWithoutFeedback>
        )}
        <Text style={styles.radius1} />
        <Icon name="pause" style={styles.radius1Icon} size={30}></Icon>
        <Text style={styles.radius2} />
        <Text style={styles.radius3} />
      </View>
      {
        // <Text style={styles.contacts}>just a few contacts around you</Text>
      }
      {step === 3 && (
        <TouchableWithoutFeedback
          onPress={(): void => {
            AsyncStorage.setItem('userHasSeenOnboarding', 'true');
            navigation.navigate('Home');
          }}>
          <View style={[styles.bubbleBox, styles.thirdBubble]}>
            <Text style={styles.bubbleText}>{t('homeTour.report')}</Text>
            <View style={styles.bubbleActions}>
              <Text style={styles.done}>{t('homeTour.done')}</Text>
              <Icon name="chevron-right" size={18} style={styles.nextIcon} />
            </View>
            <View style={[styles.bubbleTriangle, styles.bubbleTriangleLeft]} />
          </View>
        </TouchableWithoutFeedback>
      )}
      <Text style={[styles.contacts]}>0 {t('home.contacts')} (avg: n/a)</Text>

      <BottomMenu activate={'Tracing'}></BottomMenu>
    </View>
  );
};
export default HomeTour;