import { useQuery } from "@apollo/client";
import React from "react";
import { ProgressBar } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { View, Text } from "react-native";
import { useTranslation } from "react-i18next";
import { formatBytes } from "../../util/document-upload.utility";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobSpaceAvailable);

export function JobSpaceAvailable({ bodyshop, style, jobid }) {
  const { t } = useTranslation();
  const { data } = useQuery(GET_DOC_SIZE_TOTALS, {
    variables: { jobId: jobid },
    skip: !jobid || jobid === "temp",
  });

  if (!jobid || !data) return <></>;

  const progress =
    data.documents_aggregate.aggregate.sum.size /
    ((bodyshop && bodyshop.jobsizelimit) || 1);

  return (
    <View style={{ margin: 10 }}>
      <Text style={{ marginBottom: 5 }}>
        {t("mediabrowser.labels.storageused", {
          used: formatBytes(data.documents_aggregate.aggregate.sum.size),
          total: formatBytes((bodyshop && bodyshop.jobsizelimit) || 1),
          percent: Math.round(progress * 100),
        })}
      </Text>
      <ProgressBar style={[style]} progress={progress} />
    </View>
  );
}