import React, { useContext, useEffect, useState } from 'react';
import { GeneralStyledBtn, ContentText } from './styles';
import { ThemeContext } from 'context/context';
import { theme } from 'data/dataMx';
import { IButtonProps, IthemeB } from 'native/atoms/Buttons/ButtonProps';
import { getOnPrincipalColorFromTheme, getPrincipalColorFromTheme } from 'native/atoms/Buttons/ButtonHelpers';
import { IFontWeight } from 'interfaces';

export const AtomButtonGhost = ({
  disabled,
  onPress,
  color,
  text,
  customColor = 'tertiary',
  width = '144px',
  size = 'small',
  styles = {},
  family = 'regular', 
  ...props
}: IButtonProps) => {

  const { fontFamily } = useContext(ThemeContext);
  const font: string = fontFamily.main[family as keyof IFontWeight];
  const fontWeight: number = fontFamily.weight[font as keyof typeof fontFamily.weight];
  const [themeB, setThemeB] = useState<IthemeB>({
    color: color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color],
    backgroundColor: theme.transparent,
    borderWidth: '0',
    borderColor: theme.transparent,
    width: width
  });

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

  const handlerPressOut = () => {
    if (disabled) {
      setThemeB({
        color: theme.neutral500,
        backgroundColor: theme.neutral200,
        borderWidth: '1px',
        borderColor: `${theme.neutral400}`,
        width: width
      })
      return
    }
    setThemeB({
      color: color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color],
      backgroundColor: theme.transparent,
      borderWidth: '0px',
      borderColor: theme.transparent,
      width: width
    })
  }

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

  return (
    <GeneralStyledBtn
      disabled={disabled}
      onPress={() => !disabled && handlerPress()}
      onPressOut={() => handlerPressOut()}
      delayPressOut={1000}
      theme={themeB}
      testID={'gh-btn'}
      activeOpacity={100}
      font={font}
      size={size}
      styles={styles}
      {...props}
    >
      <ContentText
        fontWeight={fontWeight}
        theme={themeB}
        font={font}
        size={size}
      >
        {text}
      </ContentText>
    </GeneralStyledBtn>
  );
};
