import React, { useCallback, memo } from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { theme } from '../../../app/theme';
import { Flag } from '../../../common/components/flag';
import { ShadowBox } from '../../../common/components/shadow-box';
import {
  BORDER_RADIUS,
  NMF_CARD_HEIGHT,
  HH_CARD_HEIGHT,
  HH_CARD_TITLE_HEIGHT,
} from '../../constants';
import { SRow } from '../../../common/s-components/layout/s-row';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
import { SDot } from '../../../common/s-components/s-dot';
import { getDaysAgoLabel } from '../../../common/transducers';
import { SCardPosition } from '../../s-components/s-card-position';
import { SNoActiveLine } from '../../s-components/s-no-active-line';

type TProps = {
  active?: boolean;
  highlighted?: boolean;
  marketCode: string;
  position: number | null;
  marketName: string;
  onPress: () => void;
  cardVariant: string;
  trend?: number;
  isNew?: boolean;
  addedDays?: number;
};

export const Card: React.FC<TProps> = memo(
  ({
    active,
    highlighted,
    marketCode,
    position,
    marketName,
    onPress,
    cardVariant,
    trend,
    isNew,
    addedDays,
  }) => {
    const isNmf = cardVariant === 'nmf';
    const isZeoTrend = trend === 0;
    const isZeroAddedDays = addedDays === 0;
    const daysTitle = isZeroAddedDays
      ? 'added today'
      : getDaysAgoLabel(addedDays, '', 'ON');
    const renderContent = useCallback(() => {
      return (
        <>
          <SBox
            height={isNmf ? NMF_CARD_HEIGHT : HH_CARD_HEIGHT}
            borderRadius={BORDER_RADIUS}
            overflow="hidden"
            position="relative"
          >
            {active && !isNmf ? (
              <SBox
                position="absolute"
                top={0}
                width={1}
                height={HH_CARD_TITLE_HEIGHT}
                alignItems="center"
                justifyContent="center"
              >
                <SH6 color="romanPurple">{daysTitle}</SH6>
              </SBox>
            ) : null}
            <SBox
              px={16}
              mt={active ? 13 : isNmf ? 13 : 21}
              mb={6}
              alignItems="center"
              justifyContent="center"
            >
              {active ? (
                <>
                  <SRow
                    mt={isNmf ? 0 : 24.5}
                    ml={isNmf ? 0 : isNew ? 15 : isZeoTrend ? 0 : 4}
                  >
                    <SCardPosition color="black" medium>
                      {position}
                    </SCardPosition>
                    {!isNmf ? (
                      isNew ? (
                        <SDot mt={5} ml={10} bg={theme.colors.dodgerBlue} />
                      ) : (
                        <PositionTrendsLabel
                          showZerroTrend
                          trend={{
                            value: trend,
                          }}
                          isTransparent
                          isReversed
                          mt={1}
                          ml={5}
                          downColor={theme.colors.pomegranate}
                          upColor={theme.colors.chateauGreen}
                          zeroColor={theme.colors.goldDrop}
                        />
                      )
                    ) : null}
                  </SRow>
                </>
              ) : (
                <SNoActiveLine color="romanPurple" medium>
                  –
                </SNoActiveLine>
              )}
            </SBox>
            <SBox alignItems="center" px={16}>
              <SH6 numberOfLines={1} color="romanPurple">
                {marketName}
              </SH6>
            </SBox>
          </SBox>

          <SBox
            width={22}
            height={22}
            borderRadius={12}
            bg="ebonyClay"
            position="absolute"
            top={-8}
            left={-8}
            alignItems="center"
            justifyContent="center"
          >
            <SBox opacity={active ? 1 : 0.5}>
              <Flag
                width={16}
                height={16}
                market={marketCode}
                marginTop={0}
                variant="white"
              />
            </SBox>
          </SBox>
        </>
      );
    }, [active, highlighted, marketCode, position, marketName]);

    const renderActiveCard = useCallback(() => {
      const testID = isNmf ? 'nmf-market-card' : 'hh-market-card';
      return (
        <>
          <Pressable testID={testID} onPress={onPress}>
            {({ pressed }) => (
              <ShadowBox borderRadius={BORDER_RADIUS}>
                <SBox
                  style={[
                    StyleSheet.absoluteFill,
                    {
                      overflow: 'hidden',
                      borderRadius: BORDER_RADIUS,
                      opacity: pressed ? 0.8 : 1,
                    },
                  ]}
                >
                  <SBox
                    marginTop={isNmf ? 0 : HH_CARD_TITLE_HEIGHT}
                    height={
                      isNmf
                        ? NMF_CARD_HEIGHT
                        : HH_CARD_HEIGHT - HH_CARD_TITLE_HEIGHT
                    }
                  >
                    {highlighted ? (
                      <LinearGradient
                        colors={theme.gradients.witheToLightGray}
                        locations={[0, 1]}
                        style={[
                          {
                            borderRadius: isNmf ? BORDER_RADIUS : 0,
                            flex: 1,
                          },
                        ]}
                      />
                    ) : (
                      <LinearGradient
                        colors={theme.gradients.witheToLightGray2}
                        locations={[0, 1, 1]}
                        style={[
                          {
                            flex: 1,
                            borderRadius: isNmf ? BORDER_RADIUS : 0,
                          },
                        ]}
                      />
                    )}
                  </SBox>
                  {highlighted ? (
                    <SBox
                      bg="mountainMeadow"
                      height={4}
                      width={1}
                      position="absolute"
                      bottom={0}
                    />
                  ) : null}
                  {active && !isNmf ? (
                    <SBox
                      position="absolute"
                      top={0}
                      left={0}
                      width={1}
                      height={HH_CARD_TITLE_HEIGHT}
                      bg={highlighted ? 'mischka' : 'ghost'}
                    />
                  ) : null}
                </SBox>
                {renderContent()}
              </ShadowBox>
            )}
          </Pressable>
        </>
      );
    }, [renderContent]);

    const renderNotActiveCard = () => {
      const testID = isNmf
        ? 'nmf-inactive-market-card'
        : 'hh-inactive-market-card';
      return (
        <SBox testID={testID}>
          <SBox
            style={[StyleSheet.absoluteFill, { borderRadius: BORDER_RADIUS }]}
            bg="graySuit"
          />
          <LinearGradient
            colors={theme.gradients.nmfNotActiveCard}
            locations={[0, 1]}
            style={[
              StyleSheet.absoluteFill,
              { borderRadius: BORDER_RADIUS, opacity: 0.3 },
            ]}
          />
          {renderContent()}
        </SBox>
      );
    };

    return (
      <SBox height={isNmf ? NMF_CARD_HEIGHT : HH_CARD_HEIGHT}>
        {active ? renderActiveCard() : renderNotActiveCard()}
      </SBox>
    );
  }
);