import React, {Fragment, useState} from "react";
import {
  cancelDownload,
  getFile,
  getFileDownloading
} from "../utils/hashmap";
import {
  getMessageMetaData,
  humanFileSize
} from "../utils/helpers";

//strings

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

//components
import Text from "../../../Talk-ui-kit/src/typography/Text";
import Container from "../../../Talk-ui-kit/src/container";
import Shape, {ShapeCircle} from "../../../Talk-ui-kit/src/shape";
import Loading, {LoadingBlinkDots} from "../../../Talk-ui-kit/src/loading";
import {
  MdArrowDownward,
  MdPlayArrow
} from "react-icons/md";

//styling
import style from "../../styles/app/ModalThreadInfoMessageTypesMedia.scss";

//statics
const lastFileRequest = {
  downloadFunction: null,
  fileHash: null,
  id: null
};

//functions
function fileStatus(fileHash) {
  let fileResult = getFileDownloading(fileHash);
  const isDownloading = fileResult === true || fileResult === "LOADING";
  if (isDownloading) {
    return "DOWNLOADING";
  }
  if (!fileResult) {
    return "NOT_STARTED";
  }
  return fileResult
}

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

function openModalMedia(idMessage) {
  window.modalMediaRef.getFancyBox().open({src: `#${idMessage}`, opts: {arrows: false, infobar: false}});
}

function onPlayClick(fileHash, dispatch, setDownloading, idMessage, idMessageTrigger, downloadable) {
  const fileStatusResult = fileStatus(fileHash);
  if (lastFileRequest.downloadFunction) {
    lastFileRequest.downloadFunction(false);
    cancelDownload(lastFileRequest.fileHash, dispatch)
  }
  lastFileRequest.downloadFunction = setDownloading;
  lastFileRequest.id = idMessage;
  lastFileRequest.fileHash = fileHash;

  function pastAction() {
    if (downloadable) {
      if (document.getElementById(idMessageTrigger)) {
        document.getElementById(idMessageTrigger).click();
      }
    } else {
      setTimeout(e => {
        if (document.getElementById(idMessage)) {
          openModalMedia(idMessage);
        }
      }, 300);
    }
  }

  if (fileStatusResult === "NOT_STARTED") {
    setDownloading(true);
    getFile(fileHash, () => {
      if (lastFileRequest.id === idMessage) {
        setTimeout(() => {
          setDownloading(false);
          pastAction();
        }, 100)
      }
    }, dispatch, true, true)
  } else {
    //TODO: fix it when on new token coming
    if (fileStatusResult !== "DOWNLOADING") {
      pastAction();
    }
  }
}



export default function ({dispatch, message, type}) {
  const idMessage = `${message.id}-message-types-${type}`;
  const idMessageTrigger = `${idMessage}-trigger`;
  let [downloading, setDownloading] = useState(false);
  const metaData = getMessageMetaData(message).file;
  if (!metaData) {
    return null;
  }
  const {originalName, size} = metaData;
  const fileResult = fileStatus(metaData.fileHash);
  return (
    <Container className={style.ModalThreadInfoMessageTypesMedia__FileContainer}
               onClick={gotoMessage.bind(null, dispatch, message)} key={idMessage}>
      <Container maxWidth="calc(100% - 50px)">

        <Container className={style.ModalThreadInfoMessageTypesMedia__FileNameContainer}>
          <Text whiteSpace="noWrap" bold>{originalName}</Text>
        </Container>

        <Text size="xs" color="gray">{humanFileSize(size, true)}</Text>
      </Container>
      <Container centerLeft onClick={e => e.stopPropagation()} style={{marginLeft: "5px"}}>
        {
          (fileResult !== "DOWNLOADING" && fileResult !== "NOT_STARTED") &&
          <Fragment>
            <Fragment>
              {
                type === "file" &&
                <Text id={idMessageTrigger} link={`#${idMessage}`} download={originalName} href={fileResult}
                      linkClearStyle/>
              }
            </Fragment>

            <Fragment>
              {
                type === "video" ?
                  <video controls id={idMessage} style={{display: "none"}}
                         src={fileResult}/> :
                  type === "sound" || type === "voice" ? <audio controls id={idMessage} style={{display: "none"}}
                                                                src={fileResult}/> : ""
              }
            </Fragment>
          </Fragment>
        }

        {
          fileResult === "DOWNLOADING" || downloading ?
            <Loading><LoadingBlinkDots size="sm"/></Loading>
            :
            <Shape color="accent"
                   size="lg"
                   onClick={onPlayClick.bind(null, metaData.fileHash, dispatch, setDownloading, idMessage, idMessageTrigger, type === "file")}>
              <ShapeCircle>
                {
                  type === "file" ?
                    <MdArrowDownward style={{cursor: "pointer", marginTop: "8px"}}
                                     size={style.iconSizeSm}/>
                    :
                    <MdPlayArrow style={{cursor: "pointer", marginTop: "8px"}}
                                 size={style.iconSizeSm}/>
                }
              </ShapeCircle>
            </Shape>
        }
      </Container>
    </Container>
  )
}