import React, { useEffect, useState } from 'react';
import { GeneralStyledBtn } from './styles';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomBody } from 'native/atoms/Typography/Body';
import { TouchableOpacityProps } from 'react-native';
import { CSSObject } from 'styled-components';
import { keysTheme } from 'data/dataMx';

export interface IPropsButtonBack extends TouchableOpacityProps  {
  /** Text of button */
  text?: string;
  /** Enable or disable the button*/
  disabled: boolean;
  /** Press action */
  onPress?: (e?: any) => void;
  /** Size of component + measurement unit (we recommend using px) */
  width?: string;
  /** Minimum button size */
  minWidth?: string;
  /** Arrow color (only arrow) */
  arrowColor?: keysTheme;
  /** Css proprieties */
  styles?: CSSObject;
  /**Icon size */
  iconSize?: number;
};

interface IthemeB {
  color: keysTheme,
  width: string,
  arrowColor: keysTheme
}

export const AtomButtonBack= ({
  text,
  disabled,
  onPress,
  width = '150px',
  minWidth = '150px',
  styles = {},
  arrowColor,
  iconSize = 13,
  ...props
}: IPropsButtonBack) => {
  const [themeB, setThemeB] = useState<IthemeB>({
    color: 'neutral600',
    arrowColor: arrowColor ? arrowColor : 'neutral600',
    width: width
  });

  const handlerPress = () => {
    onPress && onPress();
    setThemeB({
      ...themeB,
      color: 'neutral700',
      arrowColor: arrowColor ? arrowColor : 'neutral700',
    })
  }

  const handlerPressOut = () => {
    if (disabled) {
      setThemeB({
        color: 'neutral500',
        arrowColor: arrowColor ? arrowColor : 'neutral500',
        width: width
      })
      return
    }
    setThemeB({
      color: 'neutral600',
      arrowColor: arrowColor ? arrowColor : 'neutral600',
      width: width
    })
  }

  useEffect(() => {
    handlerPressOut();
  }, [disabled, width, arrowColor]);
  return (
    <GeneralStyledBtn
      disabled={disabled}
      onPress={() => !disabled && handlerPress()}
      onPressOut={() => handlerPressOut()}
      delayPressOut={1000}
      theme={themeB}
      testID={'back-btn'}
      activeOpacity={100}
      minWidth={minWidth}
      styles={styles}
      {...props}
    >
      <AtomIcon name='keyboard_arrow_left' size={iconSize} color={themeB.arrowColor}/>
      {text && <AtomBody text={text} size='small' color={themeB.color} weight='semibold'/>}
    </GeneralStyledBtn>
  );
};
