import React, { memo, useState } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { SStreamCardContainer } from '../../s-components/s-stream-card-container';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Flag } from '../../../common/components/flag';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { SColorLine } from '../../s-components/s-color-line';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { getLinePrimaryColorByIndex } from '../../../graph/transducers';
import { TCardData } from '../../types';
import { SBox } from '../../../common/s-components/layout/s-box';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
// import { fp as _ } from '../../../common/utils/fp';

type TProps = {
  card?: TCardData;
  index?: number;
  showLine?: boolean;
  onCardClick: (market: string) => void;
  testID?: string;
};

export const StreamsCard: React.FC<TProps> = memo(props => {
  const [pressed, setPressed] = useState(false);
  const {
    index,
    showLine,
    // @ts-ignore
    card: { market, actualWeek, trend, value, name },
    onCardClick,
    ...rest
  } = props;

  const lineColor = showLine
    ? getLinePrimaryColorByIndex(index || 0)
    : 'transparent';

  return (
    <TouchableWithoutFeedback
      {...rest}
      onPress={() => {
        onCardClick(market);
      }}
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
    >
      <SStreamCardContainer pressed={pressed}>
        <SColorLine color={lineColor} />
        <SBox mb={7} height={21} flexDirection="row">
          <Flag market={market} width={22} height={22} marginTop={-1} />
          <SH3 ellipsizeMode="tail" numberOfLines={1} ml={14} mr={22}>
            {name}
          </SH3>
        </SBox>
        <SRow justifyContent="space-between">
          <SH6 fontSize={10} ml={36} mt={5} color="periwinkleGray">
            {actualWeek}
          </SH6>
          <SRow testID="sasd">
            <SH3 medium letterSpacing={1} mr={7}>
              {value}
            </SH3>
            <PositionTrendsLabel
              mt={3}
              mr={-4}
              showPercent
              showZerroTrend
              isTransparent
              trend={trend}
              isReversed
            />
          </SRow>
        </SRow>
      </SStreamCardContainer>
    </TouchableWithoutFeedback>
  );
});

StreamsCard.defaultProps = {
  // index: undefined,
  card: {
    value: undefined,
    trend: {},
    actualWeek: undefined,
    market: undefined,
    name: undefined,
  },
  showLine: false,
};