import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library";
import _ from "lodash";
import { H3 } from "native-base";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectCurrentCameraJobId,
  selectDeleteAfterUpload,
} from "../../redux/app/app.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "../../util/document-upload.utility";
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from "../upload-progress/upload-progress.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  selectedCameraJobId: selectCurrentCameraJobId,
  deleteAfterUpload: selectDeleteAfterUpload,
});

export default connect(mapStateToProps, null)(ImageBrowserScreen);
export function ImageBrowserScreen({
  currentUser,
  bodyshop,
  selectedCameraJobId,
  deleteAfterUpload,
}) {
  const { t } = useTranslation();
  const [uploads, setUploads] = useState({});
  function handleOnProgress(uri, percent) {
    setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
  }

  const [tick, setTick] = useState(0);
  const forceRerender = useCallback(() => {
    setTick((tick) => tick + 1);
  }, []);
  async function handleOnSuccess(uri, id) {
    console.log("onSucces!", uri);

    if (deleteAfterUpload) {
      const result = await MediaLibrary.deleteAssetsAsync([id]);
      console.log("result :>> ", result);
    }
    console.log("Omitting", uri);
    setUploads((prevUploads) => _.omit(prevUploads, uri));
  }

  const onDone = async (data) => {
    console.log("Assets :>> ", data);
    const actions = [];
    data.forEach(function (p) {
      const uri = p.uri.split("/").pop();
      actions.push(
        handleUpload(
          {
            uri: p.uri,
            onError: handleOnError,
            onProgress: ({ percent }) => handleOnProgress(uri, percent),
            onSuccess: () => handleOnSuccess(uri, p.id),
          },
          {
            bodyshop: bodyshop,
            jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
            uploaded_by: currentUser.email,
            photo: p,
          }
        )
      );
    });
    await Promise.all(actions);
    forceRerender();
    //navigation.goBack();
  };

  return (
    <SafeAreaView style={[styles.flex, styles.container]}>
      <View style={[styles.flex, styles.container]}>
        <CameraSelectJob />
        <UploadDeleteSwitch />
        {!selectedCameraJobId && (
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
          </View>
        )}
        {selectedCameraJobId && (
          <AssetsSelector
            style={{ flex: 1 }}
            key={tick}
            options={{
              // manipulate: {
              //   //width: 512,
              //   compress: 0.7,
              //   base64: false,
              //   saveTo: "jpeg",
              // },
              assetsType: ["photo", "video"],
              //maxSelections: 5,
              margin: 3,
              portraitCols: 4,
              landscapeCols: 5,
              widgetWidth: 100,
              widgetBgColor: "white",
              selectedBgColor: "#adadad",
              spinnerColor: "#c8c8c8",
              videoIcon: {
                Component: Ionicons,
                iconName: "ios-videocam",
                color: "white",
                size: 20,
              },
              selectedIcon: {
                Component: Ionicons,
                iconName: "ios-checkmark-circle-outline",
                color: "white",
                bg: "rgba(35,35,35, 0.75)",
                size: 32,
              },
              defaultTopNavigator: {
                continueText: t("mediabrowser.actions.upload"),
                goBackText: t("mediabrowser.actions.refresh"),
                buttonStyle: styles.buttonStyle,
                textStyle: styles.textStyle,
                backFunction: () => {
                  forceRerender();
                },
                doneFunction: onDone,
              },

              noAssets: {
                Component: function NoAsset() {
                  return (
                    <View
                      style={{
                        display: "flex",
                        flex: 1,
                        height: 200,
                        marginHorizontal: 20,

                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <Ionicons name="ios-photos" size={72} />
                      <Text style={{ textAlign: "center", marginTop: 10 }}>
                        {t("mediabrowser.labels.nomedia")}
                      </Text>
                    </View>
                  );
                },
              },
            }}
          />
        )}
        <UploadProgress uploads={uploads} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  container: {
    display: "flex",
    // position: "relative",
  },
  buttonStyle: {
    //backgroundColor: "tomato",
  },
  // eslint-disable-next-line react-native/no-color-literals
  textStyle: {
    color: "dodgerblue",
  },
});

function handleOnError(...props) {
  console.log("HandleOnError", props);
}