import React, { useState, useEffect } from 'react'
import { Text, TouchableOpacity, StyleSheet } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'

import { colors } from '../Colors'
import { Styles, TextStyles } from '../Styles'
import { Strings } from '../i18n'

const height = 40
const styles = StyleSheet.create({
  container: {
    flex: 1,
    left: 0,
    right: 0,
    position: 'absolute',
    bottom: -height,
    height,
  },
  gradient: {
    ...Styles.screenHorizontalPadding,
    flex: 1,
    justifyContent: 'center',
  },
  text: {
    ...TextStyles.tiny,
    color: colors.gray,
    textAlign: 'center',
  },
})

export function OfflineToast({
  show,
}: {
  show: boolean
}): React.ReactElement | null {
  const [display, setDisplay] = useState(show)
  useEffect(() => {
    setDisplay(show)
    if (show) {
      const hideToast = setTimeout(() => setDisplay(false), 5000)
      return () => clearTimeout(hideToast)
    } else {
      return () => {
        return
      }
    }
  }, [show])

  if (!display) {
    return null
  }

  return (
    <TouchableOpacity
      onPress={() => setDisplay(false)}
      style={styles.container}
    >
      <LinearGradient
        colors={['rgb(1, 251, 188)', 'rgb(0, 190, 255)', 'rgb(0, 190, 255)']}
        locations={[0.0, 0.5, 1.0]}
        style={styles.gradient}
        start={[0, 0]}
        end={[1, 1]}
      >
        <Text style={styles.text}>{Strings.Shared.NoInternetConnection}</Text>
      </LinearGradient>
    </TouchableOpacity>
  )
}