import React, { useContext } from 'react';
import { FlatList } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { theme } from '../../../app/theme';
import { SRow } from '../../../common/s-components/layout/s-row';
import { formatStreamNa, formatYearDate } from '../../../common/transducers';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
// import {getChartWeekStreamsEntities} from "../../../track-markets/transducers";
import { ContextTrends } from '../../contexts';
import { trendsData } from '../../transducers';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { CARD_WIDTH, CARD_HEIGHT } from '../../constants';
import { Skeleton } from './skeleton';
import { STrendValue } from '../../s-components/s-trend-value';
import { fp as _ } from '../../../common/utils/fp';

type TProps = {};

export const SectionTrends: React.FC<TProps> = () => {
  const { visibility, refresh, trendsEntity } = useContext(ContextTrends);
  const { skeleton } = visibility;
  const { data } = trendsEntity;
  // @ts-ignore
  const showSkeleton = skeleton & !refresh;

  if (showSkeleton) return <Skeleton />;

  const cards = trendsData(data);

  return (
    <SBox mt={54} mx={-8}>
      <FlatList
        showsHorizontalScrollIndicator={false}
        data={cards}
        horizontal
        renderItem={({ item, index }) => {
          const { trendWeek, trendLatest, dateRange, id } = item;
          const cardTitle = id === 'creations' ? 'Creations' : 'Views';

          return (
            <SBox
              height={CARD_HEIGHT}
              width={CARD_WIDTH}
              px="8"
              mx={16}
              mr={index === 0 ? 0 : 32}
            >
              <SBox
                position="absolute"
                top={0}
                left={8}
                width={CARD_WIDTH}
                height={CARD_HEIGHT}
              >
                <LinearGradient
                  colors={
                    item.id === 'creations'
                      ? theme.gradients.tiktokCreations
                      : theme.gradients.tiktokViews
                  }
                  style={{
                    flex: 1,
                    borderRadius: 8,
                  }}
                  locations={[0, 1]}
                />
              </SBox>
              <SH3 pl={16} pt={12} mb={21}>
                {cardTitle}
              </SH3>
              <SRow px={16} justifyContent="flex-start">
                <SBox width={140}>
                  <SBox opacity={0.7}>
                    <SH6 mb={7}>
                      {_.isNull(trendLatest.date)
                        ? 'N/A'
                        : formatYearDate(trendLatest.date)}
                    </SH6>
                  </SBox>
                  <SRow>
                    <STrendValue medium mr={6}>
                      {/* @ts-ignore*/}
                      {formatStreamNa(trendWeek.valueOriginal)}
                    </STrendValue>

                    <PositionTrendsLabel
                      showZerroTrend
                      showPercent
                      isTransparent
                      isReversed
                      trend={trendWeek}
                      mt={3}
                    />
                  </SRow>
                </SBox>
                <SBox mr={-16}>
                  <SBox opacity={0.7}>
                    <SH6 mb={7}>{dateRange}</SH6>
                  </SBox>
                  <SRow>
                    <STrendValue medium>
                      {/* @ts-ignore*/}
                      {formatStreamNa(trendLatest.valueOriginal)}
                    </STrendValue>

                    {trendLatest.valueOriginal ? (
                      <PositionTrendsLabel
                        showZerroTrend
                        showPercent
                        isTransparent
                        isReversed
                        trend={trendLatest}
                        mt={2}
                      />
                    ) : null}
                  </SRow>
                </SBox>
              </SRow>
            </SBox>
          );
        }}
        keyExtractor={item => item.id}
      />
    </SBox>
  );
};