import React, {useEffect, useState, useRef} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {SCREEN_WIDTH, isIPhoneX, numberWithCommas} from '../../utils';
import {
  NOTIFICATION_ICON_GRADIENT,
  CHIN_HEIGHT,
  NAV_BAR_HEIGHT,
} from '../../constants';
import {getNotificationsUnreadCount} from '../../services';
import {normalize} from 'react-native-elements';
import PillIcon4 from '../../assets/images/Group 479.svg';

interface NotificationPillProps {
  showIcon: boolean;
}

export const NotificationPill: React.FC<NotificationPillProps> = ({
  showIcon,
}) => {
  const [iconStart, setIconStart] = useState<number[]>([0, -100]);
  const [tipStart, setTipStart] = useState<number[]>([0, -100]);
  const [notificationSets, setNotificationSets] = useState<{
    CMT?: number;
    FRD_REQ?: number;
    P_VIEW?: number;
    MOM_TAG?: number;
  }>({});
  const [timeCount, setTimeCount] = useState<boolean>(false);
  const [timeOut, setTimeOut] = useState<boolean>(false);
  const iconRef = useRef(null);
  const tipRef = useRef(null);
  const pillTip = require('../../assets/images/purple-tip.png');

  const navBarPos = 20;

  // If there are notifications, determines the size of the pill
  // and sets points for correct placement
  useEffect(() => {
    setTimeout(() => {
      if (iconRef.current) {
        iconRef.current.measure(
          (
            _fx: number,
            _fy: number,
            width: number,
            height: number,
            _px: number,
            _py: number,
          ) => {
            if (tipRef.current) {
              tipRef.current.measure(
                (
                  __fx: number,
                  __fy: number,
                  width2: number,
                  __height: number,
                  __px: number,
                  __py: number,
                ) => {
                  const x = SCREEN_WIDTH / 2 - width / 2;
                  const y = isIPhoneX()
                    ? CHIN_HEIGHT + NAV_BAR_HEIGHT + navBarPos
                    : NAV_BAR_HEIGHT + navBarPos;
                  setIconStart([x, y]);
                  setTipStart([width / 2 - width2 / 2, height - 1]);
                  setTimeCount(true);
                },
              );
            }
          },
        );
      } else {
      }
    }, 100);
  }, [notificationSets, iconRef, tipRef]);

  // Used so that pill disappears after 10 seconds
  useEffect(() => {
    if (timeCount) {
      setTimeout(() => {
        setTimeOut(true);
      }, 10000);
    }
  }, [timeCount]);

  // Gets data from backend to check for unreads
  useEffect(() => {
    const getCount = async () => {
      const data = await getNotificationsUnreadCount();
      setTimeout(() => {
        if (data) {
          setNotificationSets(data);
        }
      }, 100);
    };

    getCount();
  }, []);

  return (
    <>
      {notificationSets &&
        Object.keys(notificationSets).length !== 0 &&
        showIcon &&
        !timeOut && (
          <View
            style={[
              styles.purpleContainer,
              {bottom: iconStart[1], left: iconStart[0]},
            ]}
            ref={iconRef}>
            <LinearGradient
              colors={NOTIFICATION_ICON_GRADIENT}
              style={styles.iconPurple}>
              {notificationSets.CMT && (
                <>
                  <Image
                    source={require('../../assets/images/pill-icon-1.png')}
                    style={styles.indicationIcon}
                  />
                  <Text style={styles.text}>
                    {numberWithCommas(notificationSets.CMT)}
                  </Text>
                </>
              )}
              {notificationSets.FRD_REQ && (
                <>
                  <Image
                    source={require('../../assets/images/pill-icon-2.png')}
                    style={styles.indicationIcon}
                  />
                  <Text style={styles.text}>
                    {numberWithCommas(notificationSets.FRD_REQ)}
                  </Text>
                </>
              )}
              {notificationSets.P_VIEW && (
                <>
                  <Image
                    source={require('../../assets/images/pill-icon-3.png')}
                    style={styles.indicationIcon}
                  />
                  <Text style={styles.text}>
                    {numberWithCommas(notificationSets.P_VIEW)}
                  </Text>
                </>
              )}
              {notificationSets.MOM_TAG && (
                <>
                  <PillIcon4 style={styles.indicationIcon} />
                  <Text style={styles.text}>
                    {numberWithCommas(notificationSets.MOM_TAG)}
                  </Text>
                </>
              )}
            </LinearGradient>
            <Image
              style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]}
              source={pillTip}
              ref={tipRef}
            />
          </View>
        )}
    </>
  );
};

const styles = StyleSheet.create({
  purpleContainer: {
    flex: 1,
    justifyContent: 'center',
    position: 'absolute',
    zIndex: 999,
  },
  iconPurple: {
    padding: 5,
    borderRadius: 15,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  text: {
    margin: 2,
    color: 'white',
    fontSize: normalize(10),
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 5,
  },
  tip: {
    position: 'absolute',
    zIndex: 999,
    height: 12,
    flex: 1,
    resizeMode: 'contain',
  },
  indicationIcon: {
    height: 14,
    width: 14,
    margin: 2,
    marginLeft: 5,
  },
  svgIndicationIcon: {
    height: 14,
    width: 14,
    margin: 3,
  },
});