import React, { useContext, memo } from 'react';
import { FlatList } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { ContextNmfData, ContextHhData } from '../contexts';
import { Card } from './card';
import { fp as _ } from '../../common/utils/fp';

export const TrackNmf: React.FC = memo(() => {
  const nmfProps = useContext(ContextNmfData);
  const hhProps = useContext(ContextHhData);
  const isNotNmfEmpty = _.length(_.path('data.items', nmfProps.entity)) > 0;
  const isNotHhEmpty = _.length(_.path('data.items', hhProps.entity)) > 0;

  if (
    nmfProps.visibility.data &&
    isNotNmfEmpty &&
    hhProps.visibility.data &&
    isNotHhEmpty
  ) {
    return (
      <SBox pb={48} px={isNotNmfEmpty && isNotHhEmpty ? 0 : 16}>
        <FlatList
          horizontal
          showsHorizontalScrollIndicator={false}
          data={[nmfProps.entity, hhProps.entity]}
          // @ts-ignore
          keyExtractor={item => _.path('data.positions_avg', item)}
          renderItem={props => {
            const { index } = props;
            return (
              <Card
                variant={index === 0 ? 'nmf' : 'hh'}
                ml={isNotNmfEmpty && isNotHhEmpty ? 16 : index === 0 ? 0 : 16}
                mr={index === 0 ? 0 : isNotNmfEmpty && isNotHhEmpty ? 16 : 0}
              />
            );
          }}
        />
      </SBox>
    );
  }
  if (nmfProps.visibility.data && isNotNmfEmpty) {
    return (
      <SBox pb={48} px={16}>
        <Card variant="nmf" fullwidth />
      </SBox>
    );
  }
  if (hhProps.visibility.data && isNotHhEmpty) {
    return (
      <SBox pb={48} px={16}>
        <Card variant="hh" fullwidth />
      </SBox>
    );
  }
  return null;
});