/* eslint-disable prettier/prettier */
import React, { useContext, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Path, G } from 'react-native-svg';
import LottieView from 'lottie-react-native';
import { GetIDContext } from '../../contexts/getid-context';

export type FaceOverlayProps = {
  isLoading?: boolean;
  status?: 'neutral' | 'success' | string;
  rect: {
    width: number;
    left: number;
    right: number;
    top: number;
    bottom: number;
    height: number;
    centerW: number;
    centerH: number;
  };
};

export type RectangleProps = {
  width: number;
  height: number;
  right: number;
  left: number;
  top: number;
  bottom: number;
  status: 'error' | 'success';
};


export const FaceOverlay = (props: FaceOverlayProps) => {
  const { width, height, top, bottom, left, right, centerW, centerH } = props.rect;
  const context = useContext(GetIDContext);
  const overlayColor = context?.theme.cameraOverlayBackgroundColor

  const strokeColor = useMemo(() => {
    switch (props.status) {
      case 'success':
        return context?.theme.successColor;
      case 'neutral':
      default:
        return context?.theme.cameraFrameColor;
      }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.status]);

    const bzWidth = width * 2 / 8;
    const bzHeight = height * 3 / 8;
    const curve = height / 8;

    return (
      <View style={styles.container}>
        {props.isLoading && (
          <View style={{ ...styles.scanningAnimationWrapper, top, left, width, height }}>
            <LottieView
              source={require('./assets/scanline.json')}
              resizeMode="cover"
              autoPlay
              loop
              style={styles.scanningAnimation}
            />
          </View>
        )}
        <Svg height="100%" width="100%">
          <G
            fillRule="evenodd"
            fill={overlayColor}
            strokeWidth="4"
          >
            <Path
              d={`M0,0  h${centerW * 2} v${centerH * 2} h-${centerW * 2} z
                  M ${centerW}, ${top}
                  C ${centerW + bzWidth},${top} ${right},${centerH - bzHeight} ${right},${centerH - curve}
                  L ${right},${centerH + curve}
                  C ${right},${centerH + bzHeight} ${centerW + bzWidth},${bottom} ${centerW},${bottom}
                  C ${centerW - bzWidth},${bottom} ${left},${centerH + bzHeight} ${left},${centerH + curve}
                  L ${left},${centerH - curve}
                  C ${left},${centerH - bzHeight} ${centerW - bzWidth},${top} ${centerW},${top}
                  Z`}
            />
          </G>
          <Path
            fill="none"
            stroke={strokeColor}
            strokeWidth={'4px'}
            strokeLinecap="round"
            d={`M ${centerW}, ${top}
                C ${centerW + bzWidth},${top} ${right},${centerH - bzHeight} ${right},${centerH - curve}
                L ${right},${centerH + curve}
                C ${right},${centerH + bzHeight} ${centerW + bzWidth},${bottom} ${centerW},${bottom}
                C ${centerW - bzWidth},${bottom} ${left},${centerH + bzHeight} ${left},${centerH + curve}
                L ${left},${centerH - curve}
                C ${left},${centerH - bzHeight} ${centerW - bzWidth},${top} ${centerW},${top}
                Z`}
          />
        </Svg>
      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    zIndex: 2,
  },
  frameWrapper: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
    margin: 'auto',
  },
  frame: {
    justifyContent: 'center',
    borderStyle: 'solid',
    borderWidth: 3,
    borderRadius: 22,
    alignItems: 'center',
    aspectRatio: 259 / 152,
  },
  scanningAnimationWrapper: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    display: 'flex',
    borderRadius: 120,
    overflow: 'hidden',
  },
  scanningAnimation: {
    flex: 1,
  },
  logo: {
    width: 400,
    height: 400,
  },
});