import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  TouchableOpacity,
  Alert,
} from 'react-native';
import {normalize} from 'react-native-elements';
import ImageZoom from 'react-native-image-pan-zoom';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {MainStackParams} from '../../routes';
import {HeaderHeight, SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
import {TaggSquareButton} from '../common';

type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
type ZoomInCropperNavigationProps = StackNavigationProp<
  MainStackParams,
  'ZoomInCropper'
>;
interface ZoomInCropperProps {
  route: ZoomInCropperRouteProps;
  navigation: ZoomInCropperNavigationProps;
}

export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
  route,
  navigation,
}) => {
  const {screenType, title, image} = route.params;
  const [aspectRatio, setAspectRatio] = useState<number>(1);

  useEffect(() => {
    navigation.dangerouslyGetParent()?.setOptions({
      tabBarVisible: false,
    });
  }, []);

  useEffect(() => {
    if (image.sourceURL) {
      Image.getSize(
        image.sourceURL,
        (w, h) => {
          setAspectRatio(w / h);
        },
        (err) => console.log(err),
      );
    }
  }, []);
  return (
    <>
      <TouchableOpacity
        style={styles.closeButton}
        onPress={() => navigation.goBack()}>
        <CloseIcon height={25} width={25} color={'white'} />
      </TouchableOpacity>
      <ImageZoom
        style={{backgroundColor: 'white'}}
        cropWidth={SCREEN_WIDTH}
        cropHeight={SCREEN_HEIGHT}
        imageWidth={SCREEN_WIDTH}
        imageHeight={SCREEN_WIDTH / aspectRatio}
        onMove={(position) =>
          console.log(
            'hi',
            position.positionX,
            position.positionY,
            position.scale,
            position.zoomCurrentDistance,
            SCREEN_WIDTH,
            SCREEN_HEIGHT,
          )
        }>
        <Image
          style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
          source={{
            uri: image.sourceURL,
          }}
        />
      </ImageZoom>
      <TaggSquareButton
        onPress={() => {
          if (image && image.filename && image.sourceURL) {
            navigation.navigate('CaptionScreen', {
              screenType,
              title: title,
              image: {filename: image.filename, path: image.sourceURL},
            });
          } else {
            Alert.alert('Invalid image file.');
          }
        }}
        title={'Next'}
        buttonStyle={'normal'}
        buttonColor={'blue'}
        labelColor={'white'}
        style={styles.button}
        labelStyle={styles.buttonLabel}
      />
    </>
  );
};

const styles = StyleSheet.create({
  closeButton: {
    position: 'absolute',
    top: 0,
    paddingTop: HeaderHeight,
    zIndex: 1,
    marginLeft: '5%',
  },
  button: {
    zIndex: 1,
    position: 'absolute',
    bottom: normalize(20),
    right: normalize(15),
    width: normalize(108),
    height: normalize(25),
    borderRadius: 10,
  },
  buttonLabel: {
    fontWeight: '700',
    fontSize: normalize(15),
    lineHeight: normalize(17.8),
    letterSpacing: normalize(1.3),
    textAlign: 'center',
  },
});