import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Appbar } from 'react-native-paper';
import useModel from 'flooks';
import Detail from './model';
import { goBack } from '../../navigation/RootNavigation';

export default function Header({ noRight }) {
  const { heardColor } = useModel(Detail, ['heardColor']);
  return (
    <>
      <StatusBar backgroundColor="transparent" style="light" translucent />
      <View style={styles.view}>
        <Appbar.Header
          dark
          theme={{
            colors: { primary: heardColor || 'transparent' },
          }}
          style={styles.header}
        >
          <Appbar.BackAction onPress={goBack} />
          <Appbar.Content />
          {!noRight && <Appbar.Action icon="magnify" />}
          {!noRight && <Appbar.Action icon="share-variant" />}
        </Appbar.Header>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  header: {
    elevation: 0,
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0,
  },
  view: {
    // backgroundColor: 'rgb(242, 242, 242)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 2,
  },
});