import React, { memo } from 'react';
import { Pressable } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { CARD_HEIGHT, CARD_WIDTH } from '../constants';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';
import { CardHeader } from './card-header';
import { CardGraph } from './card-graph';
import { CardStatistics } from './card-statistics';
import { ShadowBox } from '../../common/components/shadow-box';
import { NMarket } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  itemData: NMarket.TMarketItem;
  onPress: (...args: any[]) => void;
  disabled: boolean;
};

export const Card: React.FC<TProps> = memo(props => {
  const { itemData, onPress, disabled } = props;
  const uniqKey = _.compose<any, any, any>(
    _.toLower,
    _.pathOr('empty', ['header', 'marketName'])
  )(itemData);

  return (
    <Pressable
      testID={`track-markets-card-${uniqKey}`}
      onPress={(...args) => {
        if (!disabled) {
          onPress(...args);
        }
      }}
    >
      {({ pressed }) => (
        <ShadowBox
          width={CARD_WIDTH}
          height={CARD_HEIGHT}
          bg={theme.colors.eastBay}
          androidShadowOffset={2}
          borderRadius={8}
        >
          <SBox
            borderRadius={8}
            overflow="hidden"
            height={CARD_HEIGHT}
            width={CARD_WIDTH}
          >
            <SGradientCard
              height={CARD_HEIGHT}
              width={CARD_WIDTH}
              borderRadius={8}
              opacity={pressed && !disabled ? 0 : 0.4}
              colors={
                pressed && !disabled
                  ? theme.gradients.marketCardPressed
                  : theme.gradients.marketCard
              }
            />
            <CardHeader header={itemData.header} />
            <CardGraph {...itemData.graph} />
            <CardStatistics statistics={itemData.statistics} />
          </SBox>
        </ShadowBox>
      )}
    </Pressable>
  );
});