import React, { useState } from 'react'
import {
  Animated,
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { OfflineToast } from '../components/OfflineToast'
import { ScreenNames } from '../constants/ScreenNames'
import { timeIntervalOptions } from '../contexts/TimeIntervalContext'
import { useIsFirstRouteInParent } from '../hooks/useIsFirstRouteInParent'
import BackArrow from '../icons/BackArrow'
import { NavigationProp } from '../Navigation'
import { TextStyles } from '../Styles'
import { TimeInterval } from '../types/TimeInterval'
import { Filter } from './Filter'
import { TimeIntervalSelectorModal } from './TimeIntervalSelectorModal'
const itemWidth = 40

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    paddingVertical: 16,
    paddingHorizontal: 16,
    backgroundColor: colorsV2.black,
  },
  topContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 13,
  },
  horizontalContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 48,
  },
  title: {
    ...TextStyles.bodyHeader,
    color: colors.white,
    textAlign: 'center',
  },
  titleSecondary: {
    ...TextStyles.micro,
    textAlign: 'center',
    textTransform: 'uppercase',
  },
  leftContainer: {
    width: itemWidth * 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  centerContainer: {
    flexShrink: 1,
    paddingHorizontal: 8,
  },
  rightContainer: {
    width: itemWidth * 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  bottomContainer: {
    alignItems: 'center',
  },
})

export const HeaderNav: React.FC<{
  title?: string
  titleSecondary?: string
  navigation: NavigationProp<ScreenNames>
  left?: React.ReactNode
  right?: React.ReactNode
  top?: React.ReactNode
  bottom?: React.ReactNode
  style?: StyleProp<ViewStyle>
  titleStyle?: StyleProp<TextStyle>
  titleOpacity?: Animated.Value | Animated.AnimatedInterpolation
  showToast: boolean
  timeInterval?: TimeInterval
  setTimeInterval?: (timeInterval: TimeInterval) => void
}> = ({
  title,
  titleSecondary,
  navigation,
  left,
  right,
  top,
  bottom,
  style,
  titleStyle,
  titleOpacity,
  showToast,
  timeInterval,
  setTimeInterval,
}) => {
  const isFirstRouteInParent = useIsFirstRouteInParent()
  const [timeSelectorModalIsOpen, setTimeSelectorModalIsOpen] =
    useState<boolean>(false)
  return (
    <View style={[styles.container, style]}>
      <View style={styles.topContainer}>
        {top ??
          (timeInterval != null && setTimeInterval != null && (
            <>
              <Filter
                onPress={() => setTimeSelectorModalIsOpen(true)}
                label={
                  timeIntervalOptions.find(
                    (option) => option.value === timeInterval
                  )?.label ?? ''
                }
              />
              <TimeIntervalSelectorModal
                isOpen={timeSelectorModalIsOpen}
                setIsOpen={setTimeSelectorModalIsOpen}
                timeInterval={timeInterval}
                setTimeInterval={setTimeInterval}
              />
            </>
          ))}
      </View>
      <View style={styles.horizontalContainer}>
        <View style={styles.leftContainer}>
          {left ??
            (!isFirstRouteInParent && (
              <TouchableOpacity onPress={() => void navigation.goBack()}>
                <BackArrow />
              </TouchableOpacity>
            ))}
        </View>
        <View style={styles.centerContainer}>
          {title != null ? (
            <Animated.Text
              style={[
                styles.title,
                titleStyle,
                titleOpacity != null ? { opacity: titleOpacity } : null,
              ]}
              ellipsizeMode="tail"
              numberOfLines={1}
            >
              {title}
            </Animated.Text>
          ) : null}
          {titleSecondary && (
            <Text
              style={styles.titleSecondary}
              ellipsizeMode="tail"
              numberOfLines={1}
            >
              {titleSecondary}
            </Text>
          )}
        </View>
        <View style={styles.rightContainer}>
          {right != null ? right : null}
        </View>
      </View>

      <View style={styles.bottomContainer}>{bottom}</View>
      <OfflineToast show={showToast} />
    </View>
  )
}