Untitled

/* eslint-disable react-native/no-inline-styles */
/**
 *
 * FeedItem
 *
 */

import React, { useRef, useState, useEffect, useMemo } from 'react';
import { Alert, StyleSheet } from 'react-native';
import { Image, Picker, Text, View } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import VectorIcons from 'react-native-vector-icons';

import Ionicons from 'react-native-vector-icons/Ionicons';
import { find, map, filter as _filter } from 'lodash';

import { Colors } from 'react-native-ui-lib';

import DateFormat from '../../rb-components/DateFormat';
import { AllComponents, FeedTag } from './registry';
import { FlipFavorite, GetFavorites } from '../../../api/favorites';

type Props = {
  title?: string;
  report: any;
  company?: any;
  filter?: Function;
  component: string;
};

const AllTags = _filter(Object.values(FeedTag), i => !isNaN(Number(i)));

const FeedItem = ({ title, report, company, component, filter }: Props) => {
  const picker = useRef();
  const { mutate: flipFav, isLoading: isFlipLoading } = FlipFavorite(
    company?.id,
  );
  const { data: favorites, isLoading: isFavsLoading } = GetFavorites(
    company?.id,
  );
  const C = AllComponents[component].component;
  const dTitle = AllComponents[component].title;
  const icon = AllComponents[component].icon;

  const isFavorite = find(favorites, i => i === component);
  const isLoading = isFlipLoading || isFavsLoading;
  const iconName = "heart";
  const IconComponent = iconName in Icon ? Icon : MaterialCommunityIcon;
  return (
    <View flex-1 spread marginV-5 marginH-2>
      {title || dTitle ? (
        <View style={styles.box}>
          <View style={styles.image}>
            <IconComponent name={icon} size={45} color={Colors.white} />
          </View>
          <View style={styles.titleContainer}>
            <Text style={styles.title} body white>
              {title || dTitle}
            </Text>
          </View>
        </View>
      ) : null}
      <View flex-1 backgroundColor={Colors.$backgroundElevatedLight} paddingT-5>
        <C report={report} company={company} />
      </View>
      <View
        flex
        row
        left
        spread
        padding-10
        backgroundColor={Colors.$backgroundElevatedLight}
        style={{ borderTopWidth: 2, borderTopColor: Colors.grey60 }}>
        <View>
          <Text text100 grey30 marginL-10>
            Reported on:
          </Text>
          <DateFormat />
        </View>
        <View flex right row>
          <Icon
            name={isLoading ? 'refresh' : isFavorite ? 'heart' : 'heart-o'}
            color={isFavorite ? Colors.red10 : Colors.grey30}
            style={{
              color: isFavorite ? Colors.red10 : Colors.grey30,
              fontSize: 24,
              marginRight: 20,
            }}
            disabled={isLoading}
            onPress={() => {
              // setIsFavorite(!isFavorite);
              flipFav(component);
            }}
          />
          <Picker
            ref={picker}
            value={[]}
            useSafeArea
            enableModalBlur={false}
            onChange={(items: any) =>
              filter && filter(AllComponents[component], items)
            }
            mode={Picker.modes.MULTI}
            selectionLimit={3}
            topBarProps={{
              doneLabel: 'Filter',
              useSafeAre: true,
              containerStyle: {},
              includeStatusBar: false,
              doneButtonProps: {
                color: Colors.orange40,
                backgroundColor: Colors.orange40,
                size: 'small',
                outlineColor: Colors.orange40,
                outline: true,
              },
            }}
            renderPicker={(_value?: any, _label?: string) => {
              return (
                <Ionicons
                  name="filter-outline"
                  style={{
                    color: Colors.grey30,
                    fontSize: 24,
                  }}
                />
              );
            }}
            trailingAccessory={
              <Ionicons
                name="filter-outline"
                style={{ color: Colors.grey30, fontSize: 24 }}
              />
            }>
            {map(AllTags, option => (
              <Picker.Item
                key={option}
                value={option}
                label={FeedTag[option]}
              />
            ))}
          </Picker>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  feedItem: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#dddddd',
    // height: hp(80),
    marginTop: 15,
    marginBottom: 15,
    backgroundColor: Colors.White,
  },

  box: {
    backgroundColor: Colors.orange40,
    height: 70,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 5,
    justifyContent: 'space-around',
  },
  imageContainer: {
    marginRight: 10,
  },
  image: {
    left: 15,
    position: 'absolute',
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 25,
  },
  title: {
    fontSize: 21,
  },
});

export default FeedItem;