import React from 'react';
import { Icon } from 'UI';
const localhostWarn = (project: string) => project + '_localhost_warn';

const VersionComparison = {
  Lower: -1,
  Same: 0,
  Higher: 1,
};

function compareVersions(
  suppliedVersion: string,
  currentVersion: string
): number {
  function parseVersion(version: string) {
    const cleanVersion = version.split(/[-+]/)[0];
    return cleanVersion.split('.').map(Number);
  }

  const v1 = parseVersion(suppliedVersion);
  const v2 = parseVersion(currentVersion);

  const length = Math.max(v1.length, v2.length);
  while (v1.length < length) v1.push(0);
  while (v2.length < length) v2.push(0);

  for (let i = 0; i < length; i++) {
    if (v1[i] < v2[i]) return VersionComparison.Lower;
    if (v1[i] > v2[i]) return VersionComparison.Higher;
  }

  return VersionComparison.Same;
}

const WarnBadge = React.memo(
  ({
    currentLocation,
    version,
    siteId,
  }: {
    currentLocation: string;
    version: string;
    siteId: string;
  }) => {
    const localhostWarnSiteKey = localhostWarn(siteId);
    const defaultLocalhostWarn =
      localStorage.getItem(localhostWarnSiteKey) !== '1';
    const localhostWarnActive =
      currentLocation &&
      defaultLocalhostWarn &&
      /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation);
    const trackerVersion = window.env.TRACKER_VERSION ?? '1.0.0';
    const trackerVerDiff = compareVersions(version, trackerVersion);
    const trackerWarnActive = trackerVerDiff !== VersionComparison.Same;

    const [showLocalhostWarn, setLocalhostWarn] =
      React.useState(localhostWarnActive);
    const [showTrackerWarn, setTrackerWarn] = React.useState(trackerWarnActive);

    const closeWarning = (type: 1 | 2) => {
      if (type === 1) {
        localStorage.setItem(localhostWarnSiteKey, '1');
        setLocalhostWarn(false);
      }
      if (type === 2) {
        setTrackerWarn(false);
      }
    };

    if (!showLocalhostWarn && !showTrackerWarn) return null;

    return (
      <div
        className="flex flex-col gap-2"
        style={{
          zIndex: 999,
          position: 'absolute',
          left: '50%',
          bottom: '0',
          transform: `translate(-50%, 80%)`,
          fontWeight: 500,
        }}
      >
        {showLocalhostWarn ? (
          <div
            className={
              'px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between'
            }
          >
            <div>
              <span>Some assets may load incorrectly on localhost.</span>
              <a
                href="https://docs.openreplay.com/en/troubleshooting/session-recordings/#testing-in-localhost"
                target="_blank"
                rel="noreferrer"
                className="link ml-1"
              >
                Learn More
              </a>
            </div>

            <div className="py-1 ml-3 cursor-pointer" onClick={() => closeWarning(1)}>
              <Icon name="close" size={16} color="black" />
            </div>
          </div>
        ) : null}
        {showTrackerWarn ? (
          <div
            className={
              'px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between'
            }
          >
            <div>
              <div>
                Tracker version({version}) for this recording is{' '}
                {trackerVerDiff === VersionComparison.Lower
                  ? 'lower '
                  : 'ahead of '}
                the current({trackerVersion}) version.
              </div>
              <div>
                <span>Some recording might display incorrectly.</span>
                <a
                  href={
                    'https://docs.openreplay.com/en/deployment/upgrade/#tracker-compatibility'
                  }
                  target="_blank"
                  rel="noreferrer"
                  className="link ml-1"
                >
                  Learn More
                </a>
              </div>
            </div>

            <div className="py-1 ml-3 cursor-pointer" onClick={() => closeWarning(2)}>
              <Icon name="close" size={16} color="black" />
            </div>
          </div>
        ) : null}
      </div>
    );
  }
);

export default WarnBadge;