/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */

import * as React from 'react';
import {
  StyleSheet,
  View,
  Button,
  Image,
  Alert,
  Platform,
  TouchableOpacity,
  ImageBackground,
  Text,
  Dimensions,
} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { ImageEditor } from 'expo-image-editor';
import '@expo/match-media';
import { useMediaQuery } from 'react-responsive';
import { Host, Portal } from 'react-native-portalize';
import { Icon } from 'react-native-elements';
import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
import { moderateScale } from 'react-native-size-matters';
import * as navigationActions from 'app/navigation/NavigationService';
import { useDispatch, useSelector } from 'react-redux';
import RNFS from 'react-native-fs';
import CreateUserImage from 'app/api/methods/createUserImage';
import * as loginActions from '../../login/actions';
import * as Clipboard from 'expo-clipboard';

export default function App({ route, navigation }) {
  // console.log(route.params.uri);
  const img = route?.params?.uri;
  const [imgSave, setImageSave] = React.useState<string>(img);
  const isLandscape = useMediaQuery({ orientation: 'landscape' });

  const [imageUri, setImageUri] = React.useState<string | undefined>(img);
  const [editorVisible, setEditorVisible] = React.useState(true);

  const [croppedUri, setCroppedUri] = React.useState<string | undefined>(img);
  const dispatch = useDispatch();

  // selectPhoto();
  const launchEditor = (uri: any) => {
    // Then set the image uri
    setImageUri(uri);
    // And set the image editor to be visible
    setEditorVisible(true);
  };
  React.useEffect(() => {
    const launchEditor = (uri: any) => {
      // Then set the image uri
      setImageUri(uri);
      // And set the image editor to be visible
      setEditorVisible(true); ////////////////////////////////////////// mở ra
    };
    launchEditor(img);
  }, []);

  const SvgCircle = (props) => {
    return (
      <Svg height="100%" width="100%">
        <Defs>
          <Mask id="mask" x="0" y="0" height="100%" width="100%">
            <Rect height="100%" width="100%" fill="#fff" />
            <Circle r="50%" cx="50%" cy="50%" fill="black" />
          </Mask>
        </Defs>
        <Rect
          height="100%"
          width="100%"
          fill="rgba(0, 0, 0, 0.7)"
          mask="url(#mask)"
          fill-opacity="0"
        />
      </Svg>
    );
  };
  const saveImage = async () => {
    // console.log(imgSave);

    const formdata = {};
    formdata.type = 'avatar';
    const handle = await RNFS.readFile(imgSave, 'base64');
    formdata.duongdan = handle;
    await CreateUserImage(formdata);
    dispatch(loginActions.setImageUser(imgSave));
    navigationActions.goBack();
  };

  return (
    <View style={styles.container}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginVertical: moderateScale(10),
          marginHorizontal: moderateScale(10),
        }}>
        <TouchableOpacity
          style={{
            // backgroundColor: '#216FDB',
            paddingVertical: moderateScale(5),
            paddingHorizontal: moderateScale(20),
            borderRadius: 5,
          }}
          onPress={() => {
            navigationActions.goBack();
          }}>
          {/* <Text style={{ color: '#fff', fontWeight: 'bold' }}>TRỞ VỀ</Text> */}
          <Icon
            name="arrow-back-outline"
            type="ionicon"
            color="#050505"
            size={moderateScale(30)}
          />
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            backgroundColor: '#216FDB',
            // paddingVertical: moderateScale(5),
            paddingHorizontal: moderateScale(20),
            borderRadius: 5,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => saveImage()}>
          <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 15 }}>
            LƯU
          </Text>
        </TouchableOpacity>
      </View>
      <View style={{ position: 'relative' }}>
        <ImageBackground
          style={{
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').width,
          }}
          source={{ uri: croppedUri }}>
          <SvgCircle />
        </ImageBackground>
        <View
          style={{
            borderWidth: 1,
            borderColor: 'black',
            borderRadius: moderateScale(5),
            paddingVertical: moderateScale(5),
            paddingHorizontal: moderateScale(10),
            position: 'absolute',
            left: 10,
            bottom: 10,
            backgroundColor: '#fff',
          }}>
          <TouchableOpacity
            onPress={() => {
              // console.log(imageUri);

              launchEditor(img);
            }}>
            <View style={{}}>
              <Icon
                name="crop-outline"
                type="ionicon"
                // color="#0FA5A9"
                size={moderateScale(20)}
              />
            </View>
          </TouchableOpacity>
        </View>
      </View>

      <Portal>
        <ImageEditor
          visible={editorVisible}
          onCloseEditor={() => {
            console.log(23);

            setEditorVisible(false);
            // setImageUri(undefined);
          }}
          // onCloseEditor={() => navigationActions.goBack()}
          imageUri={imageUri}
          fixedCropAspectRatio={1}
          lockAspectRatio={true}
          minimumCropDimensions={{
            width: 50,
            height: 50,
          }}
          onEditingComplete={(result) => {
            setCroppedUri(result.uri);
            setImageSave(result.uri);
            // console.log(1);
            // console.log(result);
          }}
          throttleBlur={false}
          mode="crop-only"
          allowedTransformOperations={['crop']}
          // allowedAdjustmentOperations={['blur']}
        />
      </Portal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: 'black',
    flex: 1,
    // justifyContent: 'space-around',
    // alignItems: 'center',
    // marginTop: moderateScale(50),
  },
  imageRow: {
    borderWidth: 1,
    borderColor: 'purple',
    justifyContent: 'center',
    alignItems: 'center',
    ...(Platform.OS === 'web' ? { width: '100%' } : { flexShrink: 1 }),
  },
  image: {
    borderWidth: 1,
    borderColor: 'blue',
    resizeMode: 'contain',
    backgroundColor: '#ccc',
    margin: '3%',
    ...(Platform.OS === 'web'
      ? { width: 300, height: 300 }
      : { flex: 1, aspectRatio: 1 }),
  },
  buttonRow: {
    borderWidth: 1,
    borderColor: 'red',
    width: '100%',
    minHeight: 100,
    flexDirection: 'column',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginVertical: 40,
  },
});