import React, { useState } from 'react';
import { Platform, TouchableWithoutFeedback } from 'react-native';
import { SBox } from '../../s-components/layout/s-box';
import { SGradientCard } from '../../s-components/s-gradient-card';
import { theme } from '../../../app/theme';
import { ShadowBox } from '../shadow-box';
import { SH3 } from '../../s-components/typography/s-h3';
import { SRow } from '../../s-components/layout/s-row';
import { Icon } from '../icon';
import { MarketRow } from './market-row';
import { fp as _ } from '../../utils/fp';
import { TMarketData } from '../../../youtube-markets/types';
import { POPUP_MARKET_ID } from '../../../youtube-markets/constants';

type TProps = {
  data: { items: TMarketData[] };
  onPress: (variant: string) => void;
};

export const TopMarketsWidget: React.FC<TProps> = props => {
  const { data, onPress } = props;
  const [pressed, setPressed] = useState(false);
  const markets = _.take(5, _.path('items', data));
  const colors = {
    label: theme.colors.white,
    value: theme.colors.white,
    percent: theme.colors.white,
    barLine: theme.gradients.marketsGraphs.variant1.bg,
    percentLine: theme.gradients.marketsGraphs.variant1.fg,
    flagName: theme.colors.white,
  };
  const isAndroid = Platform.OS === 'android';

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        onPress(POPUP_MARKET_ID);
      }}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
    >
      <SBox borderRadius={8} minHeight={116} mx={16} flex={0}>
        <ShadowBox centerContent bg="eastBay" borderRadius={8} autoHeight>
          <SGradientCard
            width="100%"
            height="100%"
            colors={
              pressed
                ? theme.gradients.marketCardPressed
                : theme.gradients.marketCard
            }
            youtube-markets
            borderRadius={8}
            opacity={pressed ? 0 : 0.4}
            bg="eastBay"
          />
          <SBox px={16} pt={20} pb={22}>
            <SRow mb={18}>
              <SH3>Top Markets</SH3>
              <Icon
                ml={9}
                mt={isAndroid ? 5 : 4}
                name="next"
                size={13}
                color="white"
              />
            </SRow>
            {markets.map(o => {
              return <MarketRow key={o.market} item={o} colors={colors} />;
            })}
          </SBox>
        </ShadowBox>
      </SBox>
    </TouchableWithoutFeedback>
  );
};