import React from 'react';
import {View} from 'react-native';
import {CardContainer, Pressable} from '@components';
import {
  Match,
  MatchInPrediction,
  Prediction,
} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {MatchCardContent} from './components/MatchCardContent';
import {getBorderColor, styles} from './styles';

export interface Props {
  match: Match | MatchInPrediction;
  prediction?: Nullable<Prediction>;
  isPredictionOpen?: boolean;
  onPress?: () => void;
}

export function MatchCard({
  match,
  prediction,
  isPredictionOpen,
  onPress,
}: Props) {
  const {theme} = useTheme();

  const isFinished = match.status === 'FINISHED';
  const isLive = match.status === 'LIVE';
  const isPostponed = match.status === 'POSTPONED';
  const isCancelled = match.status === 'CANCELLED';
  const hasPrediction = !!prediction;

  const hasBothTeams = !!match.homeTeam && !!match.awayTeam;

  const isClickable =
    hasBothTeams &&
    !!onPress &&
    !isPostponed &&
    !isCancelled &&
    !(isFinished && !hasPrediction);

  const pointsEarned = prediction?.pointsEarned ?? 0;

  const wrapperStyle = [
    styles.cardOuter,
    {
      borderColor: getBorderColor({
        theme,
        isFinished,
        hasPrediction,
        isPredictionOpen,
      }),
    },
  ];

  const content = (
    <MatchCardContent
      match={match}
      prediction={prediction ?? null}
      isFinished={isFinished}
      isLive={isLive}
      isPostponed={isPostponed}
      isCancelled={isCancelled}
      hasPrediction={hasPrediction}
      pointsEarned={pointsEarned}
    />
  );

  return (
    <View style={styles.wrapper}>
      {isClickable ? (
        <Pressable
          onPress={onPress}
          style={wrapperStyle}
          backgroundColor={theme.background.elements.default}>
          {content}
        </Pressable>
      ) : (
        <CardContainer style={wrapperStyle}>{content}</CardContainer>
      )}
    </View>
  );
}

export default MatchCard;