import React, {FC} from 'react';
import {Modal} from 'react-native';
import SeetingsLogo from '@assets/svg/SettingsLogo';
import {
  Overlay,
  Wrapper,
  Title,
  Description,
  ButtonWrapper,
  NoThanksButton,
  UpdateButton,
  LabelStyles,
} from '@styles/components/app-update-modal';

interface IProps {
  type: string;
  description: string | undefined;
  hideModal: () => void;
  visible?: boolean;
  title: string;
  updateApp: () => void;
}

const AppUpdateModal: FC<IProps> = ({
  type,
  description,
  visible,
  hideModal,
  title,
  updateApp,
}) => {
  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      onRequestClose={hideModal}
      testID="appUpdateModal">
      <Overlay onPress={hideModal} activeOpacity={1} />
      <Wrapper edges={['bottom']}>
        <SeetingsLogo />

        <Title>{title}</Title>
        <Description>{description}</Description>
        <ButtonWrapper>
          {type !== 'mandatory' && (
            <NoThanksButton
              title="No thanks"
              onPress={hideModal}
              variant="text"
            />
          )}
          <UpdateButton
            title="Update"
            onPress={updateApp}
            variant={type === 'mandatory' ? 'text' : 'contained'}
            labelStyles={type === 'mandatory' && LabelStyles}
            testID="updateButton"
          />
        </ButtonWrapper>
      </Wrapper>
    </Modal>
  );
};

export default AppUpdateModal;