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 [visible, setVisible] = 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:
      !visible ||
      !conversation.job_conversations ||
      conversation.job_conversations.length === 0,
  });

  const handleVisibleChange = (visible) => {
    setVisible(visible);
  };

  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 && visible && (
        <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"
      visible={visible}
      onVisibleChange={handleVisibleChange}
    >
      <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
        <PictureFilled style={{ margin: "0 .5rem" }} />
      </Badge>
    </Popover>
  );
}