import React from 'react'
import {
  ActivityIndicator,
  StyleProp,
  Text,
  View,
  ViewStyle,
  TouchableOpacity,
} from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { TinyDspLabel } from './DspName'
import { PercentPill } from './PercentPill'
import { Dsp } from '../Consts'
import { TextStylesV2 } from '../Styles'
import { InfoModal } from './InfoModal'
import Info from '../icons/Info'
import { spaces } from '../Spaces'

/**
 * 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={[
        TextStylesV2.body,
        { color: colorsV2.white, textAlign: 'center' },
      ]}
    >
      {text}
    </Text>
  </View>
)

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

        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Text style={[TextStylesV2.h4, { color: colors.white }]}>
            {title}
          </Text>

          {infoModalTitle != null && infoModalText != null && (
            <InfoModal
              title={infoModalTitle}
              body={{ type: 'string', text: infoModalText }}
            >
              {(open) => (
                <TouchableOpacity
                  onPress={open}
                  style={{ paddingHorizontal: spaces.insets.medium }}
                >
                  <Info />
                </TouchableOpacity>
              )}
            </InfoModal>
          )}
        </View>

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