import React, {useEffect} from 'react';
import {AppState, StyleSheet, Text, View} from 'react-native';
import rpx from '@/utils/rpx';
import {IconButton} from 'react-native-paper';
import MusicQueue from '@/common/musicQueue';
import {useNavigation} from '@react-navigation/native';
import Tag from '@/components/tag';
import { fontSizeConst, fontWeightConst } from '@/constants/uiConst';

interface INavBarProps {}
export default function NavBar(props: INavBarProps) {
  const navigation = useNavigation();
  const musicItem = MusicQueue.useCurrentMusicItem();

  return (
    <View style={style.wrapper}>
      <IconButton
        icon="arrow-left"
        size={rpx(48)}
        color="white"
        onPress={() => {
          navigation.goBack();
        }}></IconButton>
      <View style={style.headerContent}>
        <Text numberOfLines={1} style={style.headerTitleText}>
          {musicItem?.title ?? ''}
        </Text>
        <View style={style.headerDesc}>
          <Text style={style.headerArtistText}>{musicItem?.artist}</Text>
          <Tag tagName={musicItem?.platform ?? ''}></Tag>
        </View>
      </View>
      <IconButton icon="share" color="white" size={rpx(48)}></IconButton>
    </View>
  );
}

const style = StyleSheet.create({
  wrapper: {
    width: rpx(750),
    height: rpx(150),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  headerContent: {
    flex: 1,
    height: rpx(150),
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: rpx(640),
  },
  headerTitleText: {
    color: 'white',
    fontWeight: fontWeightConst.bold,
    fontSize: fontSizeConst.big,
    marginBottom: rpx(12),
    includeFontPadding: false,
  },
  headerDesc: {
    height: rpx(32),
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerArtistText: {
    color: 'white',
    fontSize: fontSizeConst.small,
    includeFontPadding: false,
  },
});