import React, { useEffect, useState } from 'react';
import { AtomCardContainer, ICardContainerProps } from 'native/atoms/CardContainer';
import { AtomBody } from 'native/atoms/Typography/Body';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomImage } from 'native/atoms/Image';
import { FilterCategory } from './styles';
import { keysTheme, theme } from 'data/dataMx';
import { ITypographyProps } from 'native/atoms/Typography/TypographyProps';

export interface IFilterCategoryProps {
  /**Card border color */
  colorBorder?: keysTheme;
  /**Icon color */
  colorIcon?: keysTheme;
  /**Data to filter */
  data: any;
  /**Keys and values ​​to filter */
  filterBy: any;
  /**Icon */
  icon: string;
  /**Data to reset the filter */
  initialData: any;
  /**Enable or disable border and filter, pressing this card change this value */
  isSelect?: boolean;
  /**Function to execute when the card is pressed  */
  onPress: () => void;
  /**Filtered data  */
  filteredData: (data?:Object) => void;
  /**Filter text */
  text?: string;
  /**Props typography */
  textProps?: Omit<ITypographyProps, 'text'>;
  /**Image url */
  url?: string;
  /**Image height */
  imgHeight?: string;
  /**Image width */
  imgWidth?: string;
  /**CardContainer Height */
  height?: string;
  /**cardContainer widrh */
  width?: string;
  /**Card container props */
  cardContainerProps?: Omit<Partial<ICardContainerProps>, 'height' & 'width'>;
}

export const OrganismsFilterCategory = ({
  colorBorder = 'primary',
  colorIcon = 'primary',
  data,
  filterBy,
  filteredData,
  icon,
  initialData,
  isSelect = false,
  onPress,
  text,
  url,
  imgHeight,
  imgWidth,
  height = '116px',
  width = '118px',
  cardContainerProps,
  textProps = {
    size: 'xsmall',
  },
} : IFilterCategoryProps) => {
  const [info, setInfo] = useState(data);

  useEffect(() => {
    setInfo(data);
  }, [data]);

  useEffect(() => {
    filteredData(isSelect ? info : initialData);
  }, [info]);

  const selectCard = () => {
    filterBy.forEach( (item : any) => {
      const filter = info.filter((i: any) => {
        const key = Object.keys(item);

        return i[key[0]] === item[key[0]]
      } );

      setInfo(filter);
      
    });
    onPress();
  }

  const validate = () => {
    const splitURL = url?.split('.');
    return splitURL && splitURL[splitURL?.length - 1] == 'svg';
  }

  return(
    <FilterCategory testID='fc-btn' onPress={() => {
      selectCard();
      }} >
      <AtomCardContainer
        {...cardContainerProps}
        height={height}
        width={width}
        justifyContent='space-evenly'
        styles={{
          border: `2px solid ${ isSelect ? theme[colorBorder] : theme.transparent}`
        }
      }>
        {
          url ? <AtomImage isSvg={validate()} alt={url} src={url} imgHeight={imgHeight} imgWidth={imgWidth}/> :
          <AtomIcon styles={{ marginTop: 20 }}  name={icon} color={colorIcon} size={40}/>
        }
        {
          text &&
          <AtomBody {...textProps} text={`${text.charAt(0).toUpperCase()}${text.slice(1)}`}/>
        }
      </AtomCardContainer>
    </FilterCategory>
  );
}