import React from 'react';
import {
  WrapperContent,
  WapperText,
  WrapperBtn,
  ModalContainer,
  ModalInnerBackground,
} from './styles';
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 { AtomButtonGhost } from 'native/atoms/Buttons/Ghost';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';
import { keysTheme, mxSetup, theme } from 'data/dataMx';
import { Dimensions, View } from 'react-native';
import { ButtonColor, ButtonSize } from 'native/atoms/Buttons/ButtonProps';

export interface IAlertMessageProps {
  /** Message of Alert */
  message?: string;
  /** Function for event onclick first button */
  onClickFirstBtn?: () => void;
  /** Function for event onclick second button */
  onClickSecondBtn?: () => void;
  /** Text for first button*/
  textFirstBtn: string;
  /** Event for second button*/
  textSecondBtn?: string;
  /** Alert title, you can insert line breaks using string with backquote by entering enter key */
  title: string;
  /** Alert type */
  type: 'success' | 'error' | 'info' | 'custom';
  /** Enable second button ghost */
  enableSecundaryBtn?: boolean;
  /**Custom color if the type is custom*/
  customColor?: keysTheme;
  /** Custom icon if the type is custom */
  customIcon?: string;
  /** Custom color of button if the type is custom */
  customColorBtn?: keysTheme;
  /**Size buttons */
  sizeButtons?: ButtonSize;
  /**Width of alertMessage*/
  width?: string;
  /**Height of alertMessage*/
  height?: string;
}

interface IStyles {
  cardHeight: string;
  cardWidth: string;
  color: keysTheme;
  icon: string;
  btnColor: keysTheme;
}

export const OrganismAlertMessage = ({
  customColor = 'neutral300',
  customIcon = '',
  customColorBtn = 'primary',
  enableSecundaryBtn = false,
  message = '',
  onClickFirstBtn,
  onClickSecondBtn,
  sizeButtons,
  textFirstBtn,
  textSecondBtn,
  title,
  type,
  width = '',
  height = '',
}: IAlertMessageProps) => {
  const screenWidth: number = Dimensions.get('window').width;
  const queryDesktop: number = parseInt(
    `${mxSetup.mediaQuery.desktop.min}`.replace('px', '')
  );

  const styles = (): IStyles => {
    switch (type) {
      case 'success':
        return {
          color: 'quaternary',
          icon: 'check',
          cardWidth: width
            ? width
            : screenWidth < queryDesktop
            ? '343px'
            : '600px',
          cardHeight: height
            ? height
            : screenWidth < queryDesktop
            ? '378px'
            : '506px',
          btnColor: 'primary',
        };
      case 'error':
        return {
          color: 'secondary',
          icon: 'cancel',
          cardWidth: width
            ? width
            : screenWidth < queryDesktop
            ? '343px'
            : '600px',
          cardHeight: height
            ? height
            : screenWidth < queryDesktop
            ? '354px'
            : '506px',
          btnColor: 'secondary',
        };
      case 'info':
        return {
          color: 'neutral300',
          icon: 'alert-info',
          cardWidth: width
            ? width
            : screenWidth < queryDesktop
            ? '343px'
            : '600px',
          cardHeight: height
            ? height
            : screenWidth < queryDesktop
            ? '270px'
            : '506px',
          btnColor: 'primary',
        };
      default:
        return {
          color: customColor,
          icon: customIcon,
          cardWidth: width
            ? width
            : screenWidth < queryDesktop
            ? '343px'
            : '600px',
          cardHeight: height
            ? height
            : screenWidth < queryDesktop
            ? '378px'
            : '506px',
          btnColor: customColorBtn,
        };
    }
  };

  return (
    <ModalContainer transparent animationType='skide' visible={true}>
      <ModalInnerBackground>
        <AtomCardContainer
          bgColor={'neutral100'}
          height={styles().cardHeight}
          managePadding='30px 20px'
          width={styles().cardWidth}
          styles={{ margin: 'auto' }}
        >
          <WrapperContent>
            <AtomIcon name={styles().icon} size={75} color={styles().color} />
            <WapperText>
              <AtomHeadline
                color={type === 'info' ? 'neutral600' : 'neutral700'}
                size='medium'
                styles={{
                  marginTop: 20,
                  marginBottom: 10,
                  textAlign: 'center',
                }}
                text={title}
                weight='bold'
              />
              {type !== 'info' && message.length ? (
                <AtomBody
                  styles={{ textAlign: 'center' }}
                  text={message}
                  size='large'
                  color={'neutral600'}
                />
              ) : null}
            </WapperText>
            <WrapperBtn
              manageMargin={
                screenWidth < queryDesktop
                  ? type === 'info'
                    ? '0'
                    : '20px'
                  : '0'
              }
            >
              {textSecondBtn?.length && enableSecundaryBtn ? (
                <AtomButtonGhost
                  color={styles().btnColor as ButtonColor}
                  disabled={false}
                  onPress={onClickSecondBtn}
                  size={sizeButtons}
                  text={textSecondBtn}
                />
              ) : null}
              <AtomButtonDefault
                size={sizeButtons}
                color={styles().btnColor as ButtonColor}
                disabled={false}
                text={textFirstBtn}
                onPress={onClickFirstBtn}
              />
            </WrapperBtn>
          </WrapperContent>
        </AtomCardContainer>
      </ModalInnerBackground>
    </ModalContainer>
  );
};
