import React, { useEffect, useState } from 'react';
import Copy from '../../../assets/Copy';
import s from './MailComponent.module.scss';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useThreekitInitStatus } from '@threekit-tools/treble/dist';
import { ShareByEmailForm } from '../../ShareByEmailForm/ShareByEmailForm';
import { PAGE_NAME } from '../../../utils/constants';
import { useLocation } from 'react-router-dom';
export const MailComponent = ({ ...parameters }: any) => {
  const hasLoaded = useThreekitInitStatus();
  let location = useLocation().pathname;

  const [link, setLink] = useState('');
  const [copyText, setCopyText] = useState('Copy link');

  function changeTextToCopied() {
    setCopyText('Copied');

    setTimeout(() => {
      setCopyText('Copy link');
    }, 4000);
  }
  const originUrl = window.location.origin;
  useEffect(() => {
    if (hasLoaded) {
      getShortId();
    }
  }, [hasLoaded]);

  async function getShortId() {
    let link = await window.threekit.treble.saveConfiguration();
    setLink(`${originUrl}${location}?shortId=${link.shortId}`);
  }
  return (
    <div className={s.wrapper}>
      <div className={s.title}>Save Configuration link</div>
      <div className={s.subtitle}>
        Send via email to save / share your current configuration
      </div>
      <div className={s.mail__wrapper}>
        <div className={s.mail_title}>Email</div>
        <ShareByEmailForm link={link} />
      </div>
      <div className={s.copy_title}>
        You can view all the items that you have selected by following the link
        below
      </div>
      <div className={s.copy__wrapper}>
        <div className={s.copy_link}>{link}</div>
        <CopyToClipboard text={link} onCopy={() => changeTextToCopied()}>
          <div className={s.copy}>
            <Copy />
            <span>{copyText}</span>
          </div>
        </CopyToClipboard>
      </div>
    </div>
  );
};