import React from 'react';
import './footer.scss';
import { MiniAppView } from '../../model/miniAppView';
import packageJson from '../../../package.json';
import Icon from '../../components/Icon';
import Textarea from '../Textarea';
import { toast } from 'react-toastify';

interface Props {
  activeView: MiniAppView;
}

const Footer: React.FC<Props> = (props) => {
  let pageName = props.activeView?.url;
  const copyPageNameRef = React.useRef<HTMLTextAreaElement>(null);
  if (pageName.startsWith('/workspace/')) {
    pageName = pageName.slice('/workspace/'.length);
  }
  function copyPageName() {
    const pageNameCopy = copyPageNameRef.current;
    if (pageNameCopy) {
      pageNameCopy.value = pageName;
      pageNameCopy.select();
      document.execCommand('Copy');
      toast.success('Page path copied');
    }
  }

  return (
    <div className="footer-wrapper">
      <span title={pageName}>
        {pageName.length > 50 ? pageName.substring(0, 50) + '...' : pageName}
      </span>
      <Icon
        icon="copy"
        title="copy"
        onClick={copyPageName}
        className="icon-copy"
      />
      <div className="right-align">
        <p>{packageJson.version}</p>
      </div>
      <Textarea
        innerRef={copyPageNameRef}
        className="hidden-pagename"
      ></Textarea>
    </div>
  );
};

export default Footer;