import React from 'react'
import {
  ActivityIndicator,
  StyleProp,
  Text,
  View,
  ViewStyle,
  TouchableOpacity,
} from 'react-native'

import { colors } from '../Colors'
import { Dsp, SocialFollowers } from '../Consts'
import { spaces } from '../Spaces'
import { TextStyles } from '../Styles'
import { NetworkError } from '../hooks/useNetwork'
import { TinyDspLabel } from './DspName'
import { InfoModalButton } from './InfoModalButton'

/**
 * A centered text that can be used for empty or error states in DataTile
 */
export const DataTileText: React.FC<{
  text: string
}> = ({ text }) => (
  <View
    style={{
      flex: 1,
      padding: 24,
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <Text
      style={[
        TextStyles.body,
        {
          color: colors.white,
          textAlign: 'center',
        },
      ]}
    >
      {text}
    </Text>
  </View>
)

/**
 * A generic tile representing data for a DSP
 */
export const DataTile: React.FC<{
  dsp: Dsp | SocialFollowers | 'all'
  dspAdditionalText?: string
  title: string
  subTitle?: string
  titleWidget?: React.ReactNode
  onPress?: () => void
  style?: StyleProp<ViewStyle>
  error: NetworkError | null
  infoModalText?: string
  infoModalTitle?: string
  disableActiveOpacity?: boolean
}> = ({
  dsp,
  dspAdditionalText,
  title,
  subTitle,
  titleWidget,
  onPress,
  style,
  error,
  children,
  infoModalText,
  infoModalTitle,
  disableActiveOpacity,
}) => (
  <TouchableOpacity
    disabled={!onPress}
    onPress={onPress}
    style={[
      {
        backgroundColor: colors.metals.metal2,
        borderRadius: 16,
        paddingHorizontal: 24,
        paddingVertical: 32,
      },
      style,
    ]}
    activeOpacity={disableActiveOpacity ? 1 : undefined}
  >
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginBottom: 24,
      }}
    >
      <View style={{ display: 'flex', flex: 1 }}>
        <TinyDspLabel dsp={dsp} dspAdditionalText={dspAdditionalText} />

        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ display: 'flex', flexShrink: 1 }}>
            <Text style={[TextStyles.h4, { color: colors.midWhite }]}>
              {title}
            </Text>
          </View>

          {infoModalTitle != null && infoModalText != null && (
            <InfoModalButton
              title={infoModalTitle}
              text={infoModalText}
              style={{ paddingHorizontal: spaces.insets.medium }}
            />
          )}
        </View>

        {subTitle && (
          <Text
            style={[
              TextStyles.tiny,
              { textTransform: 'uppercase', color: colors.metals.metal0 },
            ]}
          >
            {subTitle}
          </Text>
        )}
      </View>
      {titleWidget}
    </View>
    {error != null ? (
      <DataTileText text="There was an error loading this data" />
    ) : children === null ? (
      <ActivityIndicator style={{ flex: 1 }} />
    ) : (
      children
    )}
  </TouchableOpacity>
)