import React, { useState, useEffect } from 'react';
import { keysTheme, theme } from 'data/dataMx';
import {IBannerBackgroundProps} from './BannerBackgroundProps'
import { Banner, BannerImage, BannerTitle, BannerButton } from './styles';
import { AtomSubtitle } from 'native/atoms/Typography/Subtitle';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomBody } from 'native/atoms/Typography/Body';
import { AtomImage } from 'native/atoms/Image';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';

const flexAlign = {
  center : 'center',
  left: 'flex-start',
  right: 'flex-end'
}

export const MoleculeBannerBackground = ({
  title,
  textColor,
  textAlign = 'center',
  iconName,
  height='auto',
  background = 'transparent',
  backgroundImage,
  description,
  buttonBackground = 'primary',
  buttonBackgroundCustom = 'tertiary',
  buttonText,
  onClick,
  style= {}
}: IBannerBackgroundProps) => {
  const [backgroundColors, setBackgroundColors] = useState<keysTheme>(background);

  useEffect(() => {
    setBackgroundColors(background)
  }, [background]);

  return (
    <Banner background={!backgroundImage ? theme[backgroundColors] : theme.transparent} height={height} style={style}>  
      {
        backgroundImage && (
          <BannerImage>
            <AtomImage src={backgroundImage} alt='Banner Image' imgWidth='100%' imgHeight='100%' resizeMode='cover' />
          </BannerImage>
        )
      }
      <BannerTitle flexAlign={flexAlign[textAlign]}>
        {
          iconName && <AtomIcon name={iconName} color={textColor} size={24} />
        }
        <AtomSubtitle text={title} color={textColor} size='medium' weight='regular' styles={{ textAlign: 'center' }}/>
      </BannerTitle>
      {
        description && (
          <AtomBody align={textAlign} text={description} color={textColor} size='medium' weight='regular' styles={{ textAlign: 'center' }} />
        )
      }
      {
        buttonText && (
          <BannerButton flexAlign={flexAlign[textAlign]}>
            <AtomButtonDefault
              text={buttonText}
              color={buttonBackground}
              customColor={buttonBackgroundCustom}
              disabled={false}
              onPress={onClick}
            />
          </BannerButton>
        )
      }
    </Banner>
  )
}
