import React from 'react'
import { LayoutChangeEvent, ScrollView, Text, View } from 'react-native'

import { colors } from '../Colors'
import { Dsp } from '../Consts'
import { TextStyles } from '../Styles'
import { TinyDspLabel } from '../components/DspName'

/**
 * Common header for graph detail screens
 */
export const GraphDetailScreenHeader: React.FC<{
  image: React.ReactNode
  imageWidth?: number
  imageHeight?: number
  dsp: Dsp | 'all'
  dspAdditionalText?: string
  title: string
  subTitle?: string
  onLayout?: (event: LayoutChangeEvent) => void
}> = ({
  image,
  imageWidth = 64,
  imageHeight = 64,
  dsp,
  dspAdditionalText,
  title,
  subTitle,
  onLayout,
}) => {
  const multipleImages = Array.isArray(image)
  const images = multipleImages ? image : [image]

  const renderImages = () =>
    images?.map((img, i) => (
      <View
        style={{
          width: imageWidth,
          height: imageHeight,
        }}
        key={i}
      >
        {img}
      </View>
    ))

  return (
    <View
      style={{
        paddingBottom: 16,
        backgroundColor: colors.black,
      }}
      onLayout={onLayout}
    >
      {multipleImages ? (
        <ScrollView horizontal style={{ flexDirection: 'row' }}>
          {renderImages()}
        </ScrollView>
      ) : (
        <View>{renderImages()}</View>
      )}
      <TinyDspLabel dsp={dsp} dspAdditionalText={dspAdditionalText} />
      <Text style={[TextStyles.h4, { color: colors.white }]}>{title}</Text>
      {subTitle != null && (
        <Text
          style={[
            TextStyles.tinyCaps,
            { color: colors.metals.metal0, textTransform: 'uppercase' },
          ]}
        >
          {subTitle}
        </Text>
      )}
    </View>
  )
}