import { useEffect } from 'react';
import { isAndroid, isIOS } from 'react-device-detect';
import { useLocation } from 'umi';
import './index.css';

export default function DeepLink() {
  const { search, query } = useLocation() as any;
  const deeplinkDomain = /(\/(deeplink|dl)\.)/g;
  const isDeeplinkDomain = deeplinkDomain.test(window.location.origin);
  useEffect(() => {
    if (isDeeplinkDomain) {
      if (isAndroid) {
        window.location.replace(`selly://ACTION${search}`);
        return;
      }
      if (isIOS) {
        window.location.replace(`selly://ACTION${search}`);
        setTimeout(
          () =>
            window.location.replace(
              `https://apps.apple.com/vn/app/selly-dễ-dàng-bán-hàng/id1554981586`,
            ),
          3000,
        );
        return;
      }
      return window.location.replace(query?.redirect || 'https://selly.vn');
    }
  }, []);

  return (
    <ul>
      <li>
        <div
          className="download android"
          onClick={() => {
            window.location.replace(
              'https://play.google.com/store/apps/details?id=vn.selly',
            );
          }}
        >
          <i className="fa fa fa-android fa-3x"></i>
          <span className="df">Download from</span>
          <span className="dfn">Google Play</span>
        </div>
      </li>
      <li>
        <div
          className="download apple"
          onClick={() => {
            window.location.replace(
              'https://apps.apple.com/vn/app/selly-dễ-dàng-bán-hàng/id1554981586',
            );
          }}
        >
          <i className="fa fa fa-apple fa-3x"></i>
          <span className="df">Download from</span>
          <span className="dfn">App Store</span>
        </div>
      </li>
    </ul>
  );
}