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

export const AtomButtonOutline = ({
  disabled,
  onPress,
  color,
  text,
  customColor = 'tertiary',
  width = '144px',
  size ='small',
  styles = {},
  groupStyle = 'normal',
  selected = false,
  ...props
}: IButtonProps) => {
  const { fontFamily } = useContext(ThemeContext);
  const font: string = fontFamily.main['regular' as keyof IFontWeight];

  const [themeB, setThemeB] = useState<IthemeB>(
    disabled? {
      color: theme.neutral500,
      backgroundColor: theme.neutral200,
      borderWidth: '1px',
      borderColor: `${theme.neutral400}`,
      width: width
    } : {
      color: color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color],
      backgroundColor: theme.transparent,
      borderWidth: '2px',
      borderColor: `${color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color]}`,
      width: width
    });

  const handlerPress = (fromUseEffect:boolean = false) => {
    
    onPress && onPress();
    setThemeB({
      ...themeB,
      color: color === 'custom'
        ? theme[getOnPrincipalColorFromTheme(customColor)]
        : color === 'primary'
          ? theme.primary300 : theme.secondary300,
      backgroundColor: theme.transparent,
      borderColor: `${theme.tertiary100}`,
    })
    if (disabled) {
      setThemeB({
        color: theme.neutral500,
        backgroundColor: theme.neutral200,
        borderWidth: '1px',
        borderColor: `${theme.neutral400}`,
        width: width
      })
      return
    }
    if (groupStyle === 'toggle' && fromUseEffect) {
      setThemeB({
        color: theme.neutral700,
        backgroundColor: selected? theme.transparent: theme.neutral100,
        borderWidth: selected? '2px': '0',
        borderColor: selected? theme.primary: theme.neutral100,
        width: 'auto'
      })
    }
  }

  const handlerPressOut = () => {
    setThemeB({
      color: color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color],
      backgroundColor: theme.transparent,
      borderWidth: '2px',
      borderColor: `${color === 'custom' ? theme[getPrincipalColorFromTheme(customColor)] : theme[color]}`,
      width: width
    })
  }

  useEffect(() => {
    if(groupStyle !== 'normal') {
      handlerPress(true);
    }
  }, [disabled, color, width, customColor, selected]);

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