import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { formatCount } from '../util'
import { AverageViewDuration } from './AverageViewDuration'
import { DiffNumber } from './DiffNumber'
import { InfoModalButton } from './InfoModalButton'

interface SummaryLegendItemProps {
  label: string
  labelColor?: string
  style?: StyleProp<ViewStyle>
  infoModal?: {
    text: string
    title: string
  }
}

const styles = StyleSheet.create({
  text: { ...TextStyles.bodyBold, color: colors.white },
})

/**
 * A single value in a graph summary
 */
export const SummaryLegendItem: React.FC<SummaryLegendItemProps> = ({
  label,
  labelColor,
  style,
  infoModal,
  children,
}) => (
  <View style={style}>
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Text
        style={{
          marginBottom: 5,
          ...TextStyles.tiny,
          ...{ color: labelColor ?? colors.metals.metal0 },
        }}
      >
        {label}
      </Text>
      {infoModal != null && (
        <InfoModalButton
          title={infoModal.title}
          text={infoModal.text}
          style={{ padding: 0, paddingHorizontal: 10 }}
        />
      )}
    </View>
    {children}
  </View>
)

/**
 * Displays an absolute value
 */
export const SummaryLegendAbsoluteValueItem: React.FC<
  SummaryLegendItemProps & {
    value?: number
  }
> = ({ label, labelColor, style, infoModal, value }) => (
  <SummaryLegendItem
    label={label}
    labelColor={labelColor}
    style={style}
    infoModal={infoModal}
  >
    <Text style={styles.text}>
      {value != null ? formatCount(value) : Strings.Shared.NotApplicable}
    </Text>
  </SummaryLegendItem>
)

/**
 * Displays a change
 */
export const SummaryLegendChangeItem: React.FC<
  SummaryLegendItemProps & {
    change?: number
  }
> = ({ label, labelColor, style, infoModal, change }) => (
  <SummaryLegendItem
    label={label}
    labelColor={labelColor}
    style={style}
    infoModal={infoModal}
  >
    {change != null ? (
      <DiffNumber value={change} size="large" type="total" />
    ) : (
      <Text style={styles.text}>{Strings.Shared.NotApplicable}</Text>
    )}
  </SummaryLegendItem>
)

/**
 * Displays a change percentage
 */
export const SummaryLegendChangePercentageItem: React.FC<
  SummaryLegendItemProps & {
    changePercentage?: number
  }
> = ({ label, labelColor, style, infoModal, changePercentage }) => (
  <SummaryLegendItem
    label={label}
    labelColor={labelColor}
    style={style}
    infoModal={infoModal}
  >
    {changePercentage != null ? (
      <DiffNumber
        value={Math.round(changePercentage)}
        size="large"
        type="percentage"
      />
    ) : (
      <Text style={styles.text}>{Strings.Shared.NotApplicable}</Text>
    )}
  </SummaryLegendItem>
)

/**
 * Displays a position
 */
export const SummaryLegendPositionItem: React.FC<
  SummaryLegendItemProps & {
    position?: {
      current: number | null
      previous: number | null
    }
  }
> = ({ label, labelColor, style, infoModal, position }) => (
  <SummaryLegendItem
    label={label}
    labelColor={labelColor}
    style={style}
    infoModal={infoModal}
  >
    {position != null ? (
      <Text style={styles.text}>
        {position?.current != null
          ? `#${formatCount(position.current)}`
          : Strings.Shared.NotApplicable}
      </Text>
    ) : null}
  </SummaryLegendItem>
)

/**
 * Displays a position
 */
export const SummaryLegendAverageViewDurationItem: React.FC<
  SummaryLegendItemProps & {
    averageViewDurationPercentage?: number
    durationSeconds?: number
  }
> = ({
  label,
  labelColor,
  style,
  infoModal,
  averageViewDurationPercentage,
  durationSeconds,
}) => (
  <SummaryLegendItem
    label={label}
    labelColor={labelColor}
    style={style}
    infoModal={infoModal}
  >
    {averageViewDurationPercentage != null && durationSeconds != null ? (
      <AverageViewDuration
        averageViewDurationPercentage={averageViewDurationPercentage}
        durationSeconds={durationSeconds}
      />
    ) : (
      <Text style={styles.text}>{Strings.Shared.NotApplicable}</Text>
    )}
  </SummaryLegendItem>
)