import React from 'react';
import { View } from 'react-native';
import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
import { faFilter } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { Form } from '@unform/web';
import * as _ from 'lodash';
import { NumberFormat } from '../../../../services';
import { Flex } from '../../../Flex/native';
import { NavigationBar } from '../../../NavigationBar';
import { RSValue, RFValue } from '../../../RFValue';
import { Tabs } from '../../../Tabs/native';
import { TagsFilters } from '../../../TagsFilters/native';
import { TextNative } from '../../../TextNative';
import { IPageListingChildrenProps } from '../PageListing.interface';
import { BorderRoundedTop, FilterBtn, TextFilter, TagsFiltersContainer } from './SubHeaderListingContainer.style';

export function SubHeaderListingContainer(props: IPageListingChildrenProps): JSX.Element {
   const { tagsFilters, tagsFiltersRef, viewList, setTagsFilterSize, navActions } = props;
   const { filters } = viewList;

   function onChange(tags): void {
      setTagsFilterSize(tags.length ? RSValue(35) : 0);
   }

   return (
      <View style={{ backgroundColor: 'white' }}>
         <ResultsInfo {...props} />
         {tagsFilters && (
            <TagsFiltersContainer view={tagsFiltersRef.current?.tagsCount}>
               <TagsFilters ref={tagsFiltersRef} {...tagsFilters} filters={filters} onChange={onChange} />
            </TagsFiltersContainer>
         )}
      </View>
   );
}

const BarGradient = React.memo(function BarGradient(): any {
   return (
      <Svg height="10px" width="100%" fill="transparent" color="transparent">
         <Defs>
            <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
               <Stop offset="0" stopColor="white" stopOpacity="0.8" />
               <Stop offset="1" stopColor="white" stopOpacity="0" />
            </LinearGradient>
         </Defs>
         <Rect x="0" y="0" height="100%" width="100%" fill="url(#grad)" />
      </Svg>
   );
});

function ResultsInfo(props: IPageListingChildrenProps): JSX.Element {
   const { openFilters, showCountListing = true, viewList } = props;

   const { resourcesTotal } = viewList;

   return (
      <ResultsInfoRender
         showCountListing={showCountListing}
         resourcesTotal={resourcesTotal}
         openFilters={openFilters}
      />
   );
}

const ResultsInfoRender = React.memo(function ResultsInfoRender({
   showCountListing,
   resourcesTotal,
   openFilters,
}: any): any {
   return (
      <View style={{ backgroundColor: 'black' }}>
         <BorderRoundedTop>
            <Flex flex={1} justifyContent="center">
               <TextNative size={14}>
                  {showCountListing && (
                     <>
                        <TextNative size={13} bold>
                           {NumberFormat(resourcesTotal, 0)}
                        </TextNative>{' '}
                        resultados
                     </>
                  )}
               </TextNative>
            </Flex>
            <Flex justifyContent="center">
               <FilterBtn onPress={() => openFilters()} ripple testID="open-filter">
                  <TextFilter>
                     <FontAwesomeIcon icon={faFilter} color="white" size={RFValue(12)} />
                     &nbsp; FILTRAR
                  </TextFilter>
               </FilterBtn>
            </Flex>
         </BorderRoundedTop>
      </View>
   );
},
_.isEqual);
