import React, { useContext, useEffect, useState } from 'react';
import { GeneralStyledButton, ContentText, IconContainer } from './styles';
import { IFontWeight } from 'interfaces';
import { ThemeContext } from 'context/context';
import { theme } from 'data/dataMx';
import { AtomIcon } from 'native/atoms/Icon';
import { ButtonHeight, ButtoniconTypeDesign, IconAlign, IButtonProps, IStylesTheme, ButtonSize } from 'native/atoms/Buttons/ButtonProps';
import {
  getColorFromButtonIcon,
  getOnColorFromButtonIcon,
  getOnPrincipalColorFromTheme,
  getPrincipalColorFromTheme,
} from '../ButtonHelpers';
import { IWeightFont } from 'native/atoms/Typography/TypographyProps';

export interface IIconButtonProps extends IButtonProps {
  /** Name icon in button */
  icon: string;
  /** Position icon in button */
  iconAlign?: IconAlign;
  /** How the color looks */
  typeButtonIcon?: ButtoniconTypeDesign;
  /** Shape of button border */
  shape?: 'square' | 'default' | 'circle';
  /* how is justified content from flex */
  justifyContent?: string;
  /* size of the icon (defaults to size of the atom) */
  iconSize?: ButtonSize;
  /* color of the icon (defaults to color of the atom) */
  iconColor?: any;
  /* Weight font for text */
  textWeight?: IWeightFont;
}


export const AtomButtonIcon = ({
  disabled,
  onPress,
  color,
  text,
  width = ButtonHeight.small,
  icon,
  iconAlign = 'right',
  customColor = 'tertiary',
  typeButtonIcon = 'default',
  size = 'small',
  iconSize = size,
  iconColor = '',
  styles = {},
  shape = 'default',
  justifyContent = 'center',
  textWeight = 'regular',
  ...props
}: IIconButtonProps) => {
  const { fontFamily } = useContext(ThemeContext);
  const font: string = fontFamily.main[textWeight as keyof IFontWeight];
  const fontWeight: number = fontFamily.weight[font as keyof typeof fontFamily.weight];
  const [themeB, setThemeB] = useState<IStylesTheme>({
    color: theme[getColorFromButtonIcon(color, customColor, typeButtonIcon)],
    backgroundColor:
      typeButtonIcon != 'default' ? theme.transparent
        : color === 'custom'
          ? theme[getPrincipalColorFromTheme(customColor)]
          : theme[color],
    borderWidth: '2px',
    borderColor: `${typeButtonIcon == 'ghost' ? theme.transparent :
      color === 'custom'
        ? theme[getPrincipalColorFromTheme(customColor)]
        : theme[color]
      }`,

  });
  const [haveText, setHaveText] = useState<boolean>(false);

  const handlerPress = () => {
    onPress && onPress();
    setThemeB({
      ...themeB,
      color: theme[getOnColorFromButtonIcon(color, customColor, typeButtonIcon)],
      backgroundColor:
        typeButtonIcon != 'default' ? 'transparent'
          : color === 'custom'
            ? theme[getOnPrincipalColorFromTheme(customColor)]
            : theme[getOnPrincipalColorFromTheme(color)],
      borderWidth: '4px',
      borderColor: `${theme.tertiary100}`
    });
  };

  const handlerPressOut = () => {
    if (disabled) {
      setThemeB({
        color: theme['neutral500'],
        backgroundColor: theme['neutral200'],
        borderWidth: '1px',
        borderColor: `${theme.neutral400}`,

      });
    } else {
      setThemeB({
        color: theme[getColorFromButtonIcon(color, customColor, typeButtonIcon)],
        backgroundColor:
          typeButtonIcon != 'default' ? theme.transparent
            : color === 'custom'
              ? theme[getPrincipalColorFromTheme(customColor)]
              : theme[color],
        borderWidth: '2px',
        borderColor: `${typeButtonIcon == 'ghost' ? theme.transparent :
          color === 'custom'
            ? theme[getPrincipalColorFromTheme(customColor)]
            : theme[color]
          }`,

      });
    }
  };

  useEffect(() => {
    handlerPressOut();
  }, [disabled, color, width, customColor, typeButtonIcon]);

  useEffect(() => {
    setHaveText(text !== '')
  }, [text]);

  return (
    <GeneralStyledButton
      disabled={disabled}
      width={width}
      theme={themeB}
      onPress={() => !disabled && handlerPress()}
      onPressOut={() => handlerPressOut()}
      delayPressOut={1000}
      activeOpacity={100}
      testID='icon-btn'
      font={font}
      size={size}
      styles={styles}
      shape={shape}
      justifyContent={justifyContent}
      {...props}
      haveText={haveText}
    >
      {iconAlign === 'left' && (
        <IconContainer haveText={haveText}>
          <AtomIcon
            name={icon}
            size={iconSize == 'large' ? 24 : iconSize == 'medium' ? 20 : 15}
            color={
              disabled
                ? 'neutral500'
                : iconColor != '' ? iconColor : getColorFromButtonIcon(color, customColor, typeButtonIcon)
            }
          />
        </IconContainer>
      )}
      <ContentText
        fontWeight={fontWeight}
        shape={shape}
        haveText={haveText}
        theme={themeB}
        font={font}
        size={size}
        styles={styles}
      >
        {text}
      </ContentText>
      {iconAlign === 'right' && (
        <IconContainer haveText={haveText}>
          <AtomIcon
            name={icon}
            size={iconSize == 'large' ? 24 : iconSize == 'medium' ? 20 : 15}
            color={
              disabled
                ? 'neutral500'
                : iconColor != '' ? iconColor : getColorFromButtonIcon(color, customColor, typeButtonIcon)
            }
          />
        </IconContainer>
      )}
    </GeneralStyledButton>
  );
};
