import { useEffect, useState } from 'react'

import { StyleSheet, Text, View } from 'react-native'

import { useAuth } from '../../context/AuthContext'

import { colors, spacing } from '../../constants/theme'

import { formatLiveDateTime } from '../../constants/formTabsConfig'

import { Icon } from './Icon'



export function FormSessionBar() {

  const { userName } = useAuth()

  const [now, setNow] = useState(formatLiveDateTime())



  useEffect(() => {

    setNow(formatLiveDateTime())

    const timer = setInterval(() => setNow(formatLiveDateTime()), 1000)

    return () => clearInterval(timer)

  }, [])



  return (

    <View style={styles.strip}>

      <View style={styles.item}>

        <Icon name="profile" size={12} color={colors.primary} />

        <Text style={styles.text} numberOfLines={1}>{userName}</Text>

      </View>

      <Text style={styles.divider}>·</Text>

      <View style={styles.item}>

        <Icon name="calendar" size={12} color={colors.primary} />

        <Text style={styles.text} numberOfLines={1}>{now}</Text>

      </View>

    </View>

  )

}



const styles = StyleSheet.create({

  strip: {

    alignItems: 'center',

    borderTopColor: colors.border,

    borderTopWidth: 1,

    flexDirection: 'row',

    flexWrap: 'wrap',

    gap: spacing.xs,

    justifyContent: 'flex-end',

    paddingBottom: spacing.sm,

    paddingTop: spacing.xs,

  },

  item: {

    alignItems: 'center',

    flexDirection: 'row',

    gap: 4,

    maxWidth: '48%',

  },

  divider: {

    color: colors.textMuted,

    fontSize: 11,

    opacity: 0.6,

  },

  text: {

    color: colors.textMuted,

    fontSize: 11,

    fontWeight: '500',

  },

})