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

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

  const [themeB, setThemeB] = useState<IStylesTheme>({
    color:
      color === 'custom'
        ? theme[getColorFromTheme(customColor)]
        : theme['neutral100'],
    backgroundColor:
      color === 'custom'
        ? theme[getPrincipalColorFromTheme(customColor)]
        : theme[color],
    borderWidth: 2,
    borderColor: `${color === 'custom'
      ? theme[getPrincipalColorFromTheme(customColor)]
      : theme[color]
      }`,
    width: width,
  });

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

  const handlerPressOut = () => {
    if (disabled) {
      setThemeB({
        color: theme['neutral500'],
        backgroundColor: theme['neutral200'],
        borderWidth: 1,
        borderColor: `${theme.neutral400}`,
        width: width,
      });
    } else {
      setThemeB({
        color:
          color === 'custom'
            ? theme[getColorFromTheme(customColor)]
            : theme['neutral100'],
        backgroundColor:
          color === 'custom'
            ? theme[getPrincipalColorFromTheme(customColor)]
            : theme[color],
        borderWidth: 2,
        borderColor: `${color === 'custom'
          ? theme[getPrincipalColorFromTheme(customColor)]
          : theme[color]
          }`,
        width: width,
      });
    }
  };

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

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