import React, { memo, useState } from 'react';
import { Platform, TouchableWithoutFeedback } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SGradientCard } from '../../../common/s-components/s-gradient-card';
import { theme } from '../../../app/theme';
import { ShadowBox } from '../../../common/components/shadow-box';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Icon } from '../../../common/components/icon';
import { MarketRow } from '../../../common/components/top-markets-widget/market-row';
import { fp as _ } from '../../../common/utils/fp';
// import { POPUP_MARKET_ID } from '../../../youtube-markets/constants';
import { TMarketItems } from '../../types';
import { Card } from '../../../track-nmf/components/card';
import { EmptyMarker } from './empty-marker';
import { TMarketRowItem } from '../../../common/types';
import { MARKET_CARD_WIDTH } from '../../constants';
import { SWidgetWrapper } from '../../s-components/s-widget-wrapper';

type TProps = {
  data: TMarketItems;
  onPress: (variant: string) => void;
  variant: 'views' | 'creations';
  pl: number;
  pr: number;
  height: number;
};

export const TopMarketsWidget: React.FC<TProps> = memo(props => {
  const { data, onPress, variant, pl, pr, height } = props;
  const [pressed, setPressed] = useState(false);

  const isCreations = variant === 'creations';
  const title = isCreations ? 'Creations' : 'Views';
  const creations = _.path('creations', data) || [];
  const views = _.path('video_views', data) || [];
  const markets = isCreations ? _.take(5, creations) : _.take(5, views);
  const barLineColor = isCreations ? 'variant1' : 'variant3';
  const colors = {
    label: theme.colors.white,
    value: theme.colors.white,
    percent: theme.colors.white,
    barLine: theme.gradients.marketsGraphs.variant1.bg,
    percentLine: theme.gradients.marketsGraphs[barLineColor].fg,
    flagName: theme.colors.white,
  };
  const isAndroid = Platform.OS === 'android';
  const isEmpty = !_.length(markets);
  const additionalWidth = isCreations ? 32 : 16;
  const shadowHeight = height ? height - 24 : height;

  if (isEmpty) return <EmptyMarker isCreations={isCreations} ml={pl} mr={pr} />;

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        onPress(variant);
      }}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
    >
      <SWidgetWrapper
        width={MARKET_CARD_WIDTH + additionalWidth}
        pl={pl}
        pr={pr}
      >
        <ShadowBox
          centerContent
          bg="eastBay"
          borderRadius={8}
          height={shadowHeight}
        >
          <SGradientCard
            width="100%"
            height="100%"
            colors={
              pressed
                ? theme.gradients.marketCardPressed
                : theme.gradients.marketCard
            }
            borderRadius={8}
            opacity={pressed ? 0 : 0.4}
            bg="eastBay"
          />
          <SBox px={16} pt={20} pb={22}>
            <SRow mb={18}>
              <SH3>{title}</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 as TMarketRowItem}
                  colors={colors}
                />
              );
            })}
          </SBox>
        </ShadowBox>
      </SWidgetWrapper>
    </TouchableWithoutFeedback>
  );
});

Card.defaultProps = {
  ml: 0,
};