import React, {Fragment, useState} from "react";
import {getMessageMetaData} from "../utils/helpers";
import {getImage} from "../utils/hashmap";

//strings
import strings from "../constants/localization";
import {LARGE_IMAGE_SIZE} from "../constants/podspace";

//actions
import {threadGoToMessageId, threadModalThreadInfoShowing} from "../actions/threadActions";

//components
import {IndexModalMediaFragment} from "./index";
import Container from "../../../Talk-ui-kit/src/container";
import Image from "../../../Talk-ui-kit/src/image";
import {Text} from "../../../Talk-ui-kit/src/typography";
import {MdWarning} from "react-icons/md";

//styling
import style from "../../styles/app/ModalThreadInfoMessageTypesImage.scss";
import oneone from "../../styles/images/_common/oneone.png";

//statics

//functions
function gotoMessage(dispatch, message) {
  dispatch(threadModalThreadInfoShowing());
  window.modalMediaRef.close();
  dispatch(threadGoToMessageId(message.time));
}

function onFancyBoxClick(dispatch, message) {
  //window.modalMediaRef.getFancyBox().open()
  setTimeout(e => {
    document.getElementsByClassName("fancybox-button--goto")[0].addEventListener("click", gotoMessage.bind(null, dispatch, message));
  }, 200)
}

export function ModalThreadInfoMessageTypesImage({message, dispatch}) {

  const idMessage = `${message.id}-message-types-picture`;
  let [thumb, setThumb] = useState(null);
  const metaData = getMessageMetaData(message).file;
  thumb = metaData && thumb !== true && getImage(metaData.fileHash || metaData.hashCode, LARGE_IMAGE_SIZE, null, setThumb, dispatch, false, true);
  const isFailed = !metaData;
  const goingNothing = !thumb || thumb === true;
  return (
    isFailed || goingNothing ?
      <Container center={isFailed} style={{width: "100%", textAlign: "center"}}>
        {isFailed ?
          <Fragment>
            <Text size="xs">{strings.fileHaveProblem}</Text>
            <Container>
              <MdWarning size={style.iconSizeMd} color={style.colorGray}/>
            </Container>
          </Fragment>
          :
          <Image
            className={style.ModalThreadInfoMessageTypesImage__Image}
            setOnBackground
            src={oneone}
            style={{
              filter: "blur(8px)",
              backgroundColor: style.colorGrayLight
            }}/>
        }

      </Container>
      :
      <Container data-fancybox key={idMessage}
                 onClick={onFancyBoxClick.bind(null, dispatch, message)}>

        <IndexModalMediaFragment
          options={{buttons: ["goto", "slideShow", "close"], caption: message.message}}
          link={thumb}>
          <Image className={style.ModalThreadInfoMessageTypesImage__Image}
                 setOnBackground
                 style={{
                   zIndex: 1,
                   backgroundColor: style.colorGrayLight
                 }}
                 src={thumb}/>

        </IndexModalMediaFragment>
      </Container>
  )
}

export default React.memo(ModalThreadInfoMessageTypesImage, a => true)