import React from 'react'
import { LayoutChangeEvent, Text, View } from 'react-native'
import { colorsV2 } from '../Colors'
import { TinyDspLabel } from '../components/DspName'
import { Dsp } from '../Consts'
import { TextStylesV2 } from '../Styles'

/**
 *
 * Common header for graph detail screens
 */
export const GraphDetailScreenHeader: React.FC<{
  image: React.ReactNode
  dsp: Dsp | 'all'
  dspAdditionalText?: string
  title: string
  subTitle?: string
  onLayout?: (event: LayoutChangeEvent) => void
}> = ({ image, dsp, dspAdditionalText, title, subTitle, onLayout }) => {
  return (
    <View
      style={{
        paddingBottom: 16,
        backgroundColor: colorsV2.black,
      }}
      onLayout={onLayout}
    >
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ width: 64, height: 64 }}>{image}</View>
      </View>

      <TinyDspLabel dsp={dsp} dspAdditionalText={dspAdditionalText} />
      <Text style={[TextStylesV2.h4, { color: colorsV2.white }]}>{title}</Text>
      {subTitle != null && (
        <Text
          style={[
            TextStylesV2.tinyCaps,
            { color: colorsV2.metals.metal0, textTransform: 'uppercase' },
          ]}
        >
          {subTitle}
        </Text>
      )}
    </View>
  )
}