/* @flow */
import React from 'react';
import {
  Dimensions,
  Modal,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
import styled from 'styled-components/native';
import Lottie from 'lottie-react-native';

import { Large, Small, Medium } from 'Ancoria/components/Text';
import Icon from 'Ancoria/components/Icon';
import {
  getModalNotificationImage,
  createNavigationObject,
  createNavigationAction,
} from 'Ancoria/helpers/notifications';
import {
  NAVIGATION_NOTIFICATION_ACTION,
  API_NOTIFICATION_ACTION,
} from 'Ancoria/constants';

import type {
  Notification,
  notificationImageType,
} from 'Ancoria/types/Notification';
import { type TimeWindowUnit } from 'Ancoria/types/TimeWindowUnit';

type Props = NavigationProps<{}> & {
  data: { data: ?Notification, rendered: boolean },
  visible: boolean,
  onRequestClose: Function,
  onDismiss: Function,
  animationType?: 'fade' | 'none' | 'slide',
  transparent?: boolean,
  setSelectedUnit: TimeWindowUnit => void,
  markAsSeen: () => void,
  submitNotificationAction: (
    string,
    { actionTypeID: number, actionKey: string }
  ) => mixed,
};

const { width } = Dimensions.get('window');

class NotificationModal extends React.Component<Props> {
  componentDidUpdate() {
    const { data, rendered } = this.props.data;
    if (data && !rendered) {
      this.props.markAsSeen();
    }
  }

  renderNotificationImage = (
    src: number,
    loop: ?boolean,
    type: notificationImageType,
    color: string
  ) => {
    if (type === 'image') {
      return <NotificationImage resizeMode="contain" source={src} />;
    }

    return <LottieView source={src} color={color} loop={loop} />;
  };

  render() {
    const {
      data: { data },
      visible,
      transparent = true,
      onRequestClose,
      onDismiss,
      animationType = 'fade',
      navigation,
      setSelectedUnit,
      submitNotificationAction,
    } = this.props;

    if (!data) return null;

    const { src, loop, type } = getModalNotificationImage(data.modalStyle);

    return (
      <Modal
        transparent={transparent}
        visible={visible}
        onRequestClose={onRequestClose}
        onDismiss={onDismiss}
        animationType={animationType}
      >
        <TouchableWithoutFeedback onPress={onRequestClose}>
          <Backdrop>
            <Content>
              <CloseIconWrapper>
                <TouchableOpacity onPress={onDismiss}>
                  <CloseIcon name="Close" size={25} />
                </TouchableOpacity>
              </CloseIconWrapper>
              <ContentWrapper>
                {src ? (
                  <ImageContainer>
                    {this.renderNotificationImage(
                      src,
                      loop,
                      type,
                      data.animationBackgroundColor.hexCode
                    )}
                  </ImageContainer>
                ) : null}
                <Container>
                  <Title center>{data.notificationCaption}</Title>
                  <Description>{data.notificationBody}</Description>
                </Container>
                <ButtonsContainer>
                  {data.actions
                    .filter(action => action.visibleInModal)
                    .map(
                      ({
                        actionType,
                        actionTypeID,
                        actionCaption,
                        color,
                        actionPath,
                        actionData,
                      }) => {
                        let onPress = onDismiss;
                        const isNavigation =
                          actionType === NAVIGATION_NOTIFICATION_ACTION;
                        const isApi = actionType === API_NOTIFICATION_ACTION;

                        if (isNavigation) {
                          // $FlowFixMe
                          const navigationObject = createNavigationObject({
                            path: actionPath,
                            data: actionData,
                          });
                          onPress = createNavigationAction(
                            navigationObject,
                            navigation,
                            onDismiss,
                            setSelectedUnit
                          );
                        } else if (isApi) {
                          onPress = () => {
                            submitNotificationAction(data.notificationID, {
                              actionTypeID,
                              actionKey: actionData.actionKey,
                            });
                            onDismiss();
                          };
                        }

                        return (
                          <ActionButton key={actionTypeID} onPress={onPress}>
                            <ActionButtonText color={color.hexCode}>
                              {actionCaption.toUpperCase()}
                            </ActionButtonText>
                          </ActionButton>
                        );
                      }
                    )}
                </ButtonsContainer>
              </ContentWrapper>
            </Content>
          </Backdrop>
        </TouchableWithoutFeedback>
      </Modal>
    );
  }
}

const Backdrop = styled.View`
  background-color: rgba(0, 0, 0, 0.6);
  flex: 1;
  align-items: center;
  justify-content: center;
`;

const Content = styled.View`
  width: ${width * 0.7}px;
  background-color: white;
  border-radius: 10px;
`;

const ContentWrapper = styled.View`
  align-items: center;
`;

const CloseIconWrapper = styled.View`
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
`;

const Container = styled.View`
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
`;

const ImageContainer = styled.View`
  width: 150px;
  height: 150px;
  align-items: center;
`;

const NotificationImage = styled.Image`
  flex: 1;
`;

const Title = styled(Large)`
  margin-bottom: 20px;
`;

const Description = styled(Small)`
  text-align: center;
  margin-bottom: 40px;
`;

const ButtonsContainer = styled.View`
  flex-direction: row;
  width: 100%;
`;

const ActionButton = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
`;

const ActionButtonText = styled(Medium)`
  color: ${p => p.color};
  font-size: 15px;
`;

const CloseIcon = styled(Icon)`
  padding: 10px;
`;

const LottieView = styled(Lottie).attrs({
  source: p => p.source,
  resizeMode: 'contain',
  autoPlay: true,
  loop: p => p.loop,
})`
  flex: 1;
  background-color: ${p => p.color};
`;

export default NotificationModal;