import { PictureFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/client";
import { Badge, Popover } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);

export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    variables: {
      jobId: conversation.job_conversations[0] && conversation.job_conversations[0].jobid
    },

    skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
  });

  const handleVisibleChange = (change) => {
    setOpen(change);
  };

  useEffect(() => {
    setSelectedMedia([]);
  }, [setSelectedMedia, conversation]);

  const content = (
    <div>
      {loading && <LoadingSpinner />}
      {error && <AlertComponent message={error.message} type="error" />}
      {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
      ) : null}
      {!bodyshop.uselocalmediaserver && data && (
        <JobDocumentsGalleryExternal
          data={data ? data.documents : []}
          externalMediaState={[selectedMedia, setSelectedMedia]}
        />
      )}
      {bodyshop.uselocalmediaserver && open && (
        <JobDocumentsLocalGalleryExternal
          externalMediaState={[selectedMedia, setSelectedMedia]}
          jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
        />
      )}
    </div>
  );

  return (
    <Popover
      content={
        conversation.job_conversations.length === 0 ? <div>{t("messaging.errors.noattachedjobs")}</div> : content
      }
      title={t("messaging.labels.selectmedia")}
      trigger="click"
      open={open}
      onOpenChange={handleVisibleChange}
    >
      <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
        <PictureFilled style={{ margin: "0 .5rem" }} />
      </Badge>
    </Popover>
  );
}
