import React, { useEffect, useState } from 'react';
import { AtomCardContainer } from 'native/atoms/CardContainer';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomHeadline } from 'native/atoms/Typography/Headline';
import { AtomBody } from 'native/atoms/Typography/Body';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';
import { PromoCodeIconContainer, PromoCodeError } from './styles';
import { AtomInputText } from 'native/atoms/Input/InputText';
import { CSSObject } from 'styled-components';

export interface IPromoCodeProps {
  /** Icon at the top */
  iconName?: string;
  /** Principal text */
  headline: string;
  /** Subtitle text */
  text: string;
  /** When the button is clicked */
  handlePress: (code:string) => void;
  /** input value */
  value?: string;
  /** The regex for input */
  regExp?: string;
  /** Error message when regExp is not true */
  errorMessageText: string;
  /** Height of the component, when a value is assigned the default behaviour is removed*/
  height?: string;
  /** Width of the component, when a value is assigned the default behaviour is removed*/
  width?: string;
  /** Styles to be added to the component container, they don't override the fault styles*/
  styles?: CSSObject;
}

export const OrganismPromoCode = ({
  iconName = 'earn_promocode',
  headline,
  text,
  handlePress,
  value = '',
  regExp = '^[A-Za-z0-9]{10,16}$',
  errorMessageText,
  height,
  width,
  styles = {}
}: IPromoCodeProps) => {
  const [inputValue, setInputValue] = useState<string>(value);
  const [errorMessage, setErrorMessage] = useState<boolean>(false);

  const promoCodeValidation = (code: string) => {
    const strRegExp = new RegExp(regExp);
    const testRegex = strRegExp.test(code);
    code.length === 0 ? setErrorMessage(false) : setErrorMessage(!testRegex);
    setInputValue(code);
  }

  useEffect(() => {
    setInputValue(value);
  }, [value])

  return (
    <AtomCardContainer
      height={height || '100%'}
      width={width || '100%'}
      managePadding='31px'
      justifyContent='center'
      alignItems='center'
      styles={styles}
    >
      <PromoCodeIconContainer>
        <AtomIcon name={iconName} size={55} />
      </PromoCodeIconContainer>
      <AtomHeadline
        size={'large'}
        text={headline}
        color={'primary400'}
        weight='light'
        styles={{ margin: '5% auto', textAlign:'center' }}
      />
      <AtomBody 
        size={'large'} 
        weight='regular' 
        color={'neutral700'} 
        text={text} 
        align='center' 
        styles={{textAlign: 'center', marginBottom: '10%'}} 
      />
      <AtomInputText 
        placeholder='Code (XY-0000)' 
        styles={{ 
          maxWidth: '234px',
          minHeight: '48px',
          height: '48px',
          maxHeight: '48px',
          marginBottom: '3%',
        }}
        value={inputValue}
        onChange={(code)=>{
          promoCodeValidation(code);
        }}
      />
      <PromoCodeError>
        <AtomBody
          size={'xsmall'} 
          weight='bold'
          color={'secondary'}
          text={errorMessage && errorMessageText ? errorMessageText : ' '}
          align='center'
        />
      </PromoCodeError>
      <AtomButtonDefault
        disabled={errorMessage}
        color={'primary'}
        text={'Redeem'}
        width='100%'
        onPress={()=>handlePress(inputValue)}
        size='medium'
      />
    </AtomCardContainer>
  );
};
