import React, { memo, useState } from 'react';
import { Dimensions, Platform, TouchableWithoutFeedback } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { SImage } from '../../common/s-components/s-image';
import { ShadowBox } from '../../common/components/shadow-box';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { TopicEntries } from './topics/topic-entries';
import { TopicRemovals } from './topics/topic-removals';
import { TopicMajorMoves } from './topics/topic-major-moves';
import { TDecoratedTrackNotificationItem, TNotificationParams } from '../types';
import { TopicTracklistUpdate } from './topics/topic-tracklist-update';
import { SRow } from '../../common/s-components/layout/s-row';
import { Icon } from '../../common/components/icon';
import { TopicChartUpdate } from './topics/topic-chart-update';
import { Flag } from '../../common/components/flag';
import { NOTIFICATION_TOPIC } from '../../common/types';

const { width } = Dimensions.get('window');
const hPadding = 16;
const cardWidth = width - hPadding * 2;

type TProps = {
  onCardPress: (params: TNotificationParams) => void;
  hasCountryCode: boolean;
  variant?: string;
  flagVariant?: string;
} & TDecoratedTrackNotificationItem;

export const Card: React.FC<TProps> = memo(props => {
  const {
    dateFormatted,
    artist,
    name,
    onCardPress,
    track_id,
    image_url,
    variant,
    topic,
    target,
    position,
    change,
    vendor,
    country_code,
    flagVariant,
    hasCountryCode,
    isrc,
    artist_name,
  } = props;
  const [pressed, setPressed] = useState(false);

  const gradientColors =
    variant === 'default'
      ? theme.gradients.notificationCard.opened
      : theme.gradients.notificationCard.new;

  const gradientColorsPressed =
    variant === 'default'
      ? theme.gradients.notificationCard.openedPressed
      : theme.gradients.notificationCard.newPressed;

  const gradientColorsNewCard = pressed
    ? theme.gradients.notificationCard.newAddStatePressed
    : theme.gradients.notificationCard.newAddState;

  const gradientLocations =
    variant === 'default' ? [0, 0.419, 1] : [0, 0.19, 1];

  const cardBg =
    variant === 'default'
      ? pressed
        ? theme.colors.pickledBluewood
        : theme.colors.fiord
      : theme.colors.fiord;

  const dateColor =
    variant === 'default' ? theme.colors.periwinkleGray : theme.colors.white;
  const dateOpacity = variant === 'default' ? 1 : 0.7;
  const topicEntries =
    topic === NOTIFICATION_TOPIC.PlaylistAdditions ||
    topic === NOTIFICATION_TOPIC.ChartAdditions ||
    topic === NOTIFICATION_TOPIC.StarredPlaylistAdditions;
  const topicRemovals =
    topic === NOTIFICATION_TOPIC.PlaylistRemovals ||
    topic === NOTIFICATION_TOPIC.ChartRemovals ||
    topic === NOTIFICATION_TOPIC.StarredPlaylistRemovals;
  const topicMajorMoves =
    topic === NOTIFICATION_TOPIC.PlaylistMajorMoves ||
    topic === NOTIFICATION_TOPIC.ChartMajorMoves ||
    topic === NOTIFICATION_TOPIC.StarredPlaylistMajorMoves;
  const moveUp = change && change < 0;
  const iconName =
    topicRemovals || (topicMajorMoves && !moveUp)
      ? 'warning'
      : 'notifications-2';
  const isIos = Platform.OS === 'ios';

  // when the backend returns the correct notification, the code will be deleted
  if (!image_url && topic !== NOTIFICATION_TOPIC.ChartUpdate) {
    return null;
  }

  return (
    <TouchableWithoutFeedback
      testID="notification-card"
      // TODO implement click
      onPress={() => {
        onCardPress({
          ...props,
          trackId: track_id,
          vendor,
          name,
          artist,
          isrc,
        });
      }}
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
    >
      <SBox mb={16} flex={0} width={cardWidth} position="relative">
        <ShadowBox centerContent bg={cardBg} borderRadius={8} autoHeight>
          <SBox overflow="hidden" borderRadius={8}>
            <SBox position="absolute" top={0} width={1} height="100%">
              {topic === 'chart_update' ? (
                <SBox width={166} height="100%" alignSelf="flex-end">
                  <Flag
                    market={country_code}
                    width={200}
                    height={94}
                    size="big"
                    marginTop={0}
                    variant="light"
                  />
                </SBox>
              ) : image_url ? (
                <SImage
                  resizeMode="cover"
                  alignSelf="flex-end"
                  width={166}
                  flex={1}
                  source={{
                    uri: image_url,
                  }}
                />
              ) : (
                <SBox width={166} height="100%" bg="comet" />
              )}
              <SBox
                position="absolute"
                right={0}
                top={0}
                height="100%"
                width={166}
              >
                <SGradientCard
                  width={166}
                  colors={pressed ? gradientColorsPressed : gradientColors}
                  locations={gradientLocations}
                  start={{ x: 0.0, y: 1 }}
                  end={{ x: 0.75, y: 1.0 }}
                  borderRadius={0}
                />
              </SBox>
              {variant !== 'default' ? (
                <SGradientCard
                  colors={gradientColorsNewCard}
                  height="100%"
                  width={1}
                  borderRadius={0}
                />
              ) : null}
            </SBox>
            <SBox
              px={16}
              pt={isIos ? 9 : 0}
              pb={isIos ? 11 : 0}
              width={1}
              height="100%"
              justifyContent="center"
            >
              <SRow alignItems="center" mb={9} ml={-2}>
                <Icon name={iconName} pt={1} size={22} color="white" />
                <SBox opacity={dateOpacity} ml={8}>
                  <SH6 color={dateColor}>{dateFormatted}</SH6>
                </SBox>
              </SRow>
              {topicEntries ? (
                <TopicEntries
                  artist={artist || artist_name}
                  name={name}
                  target={target}
                  position={position}
                  vendor={vendor}
                  isChart={topic === NOTIFICATION_TOPIC.ChartAdditions}
                  countryCode={country_code}
                  flagVariant={flagVariant!}
                  hasCountryCode={hasCountryCode}
                  showStar={
                    topic === NOTIFICATION_TOPIC.StarredPlaylistAdditions
                  }
                />
              ) : null}
              {topicRemovals ? (
                <TopicRemovals
                  artist={artist}
                  name={name}
                  target={target}
                  position={position}
                  vendor={vendor}
                  countryCode={country_code}
                  flagVariant={flagVariant!}
                  hasCountryCode={hasCountryCode}
                  isChart={topic === NOTIFICATION_TOPIC.ChartRemovals}
                  showStar={
                    topic === NOTIFICATION_TOPIC.StarredPlaylistRemovals
                  }
                />
              ) : null}
              {topicMajorMoves ? (
                <TopicMajorMoves
                  artist={artist || artist_name}
                  name={name}
                  target={target}
                  change={change}
                  position={position}
                  vendor={vendor}
                  isChart={topic === NOTIFICATION_TOPIC.ChartMajorMoves}
                  countryCode={country_code}
                  flagVariant={flagVariant!}
                  hasCountryCode={hasCountryCode}
                  showStar={
                    topic === NOTIFICATION_TOPIC.StarredPlaylistMajorMoves
                  }
                />
              ) : null}
              {topic === NOTIFICATION_TOPIC.PlaylistUpdate ? (
                <TopicTracklistUpdate
                  vendor={vendor}
                  name={name}
                  countryCode={country_code}
                  flagVariant={flagVariant!}
                  hasCountryCode={hasCountryCode}
                />
              ) : null}
              {topic === NOTIFICATION_TOPIC.ChartUpdate ? (
                <TopicChartUpdate
                  target={target}
                  countryCode={country_code}
                  flagVariant={flagVariant!}
                  hasCountryCode={hasCountryCode}
                />
              ) : null}
            </SBox>
          </SBox>
        </ShadowBox>
      </SBox>
    </TouchableWithoutFeedback>
  );
});

Card.defaultProps = {
  variant: 'default',
  flagVariant: 'light',
};