/*
 * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
 *
 * SPDX-License-Identifier: MIT AND CC-BY-4.0
 *
 * Code in this file is MIT licensed, while content is CC-BY-4.0 licensed.
 */

import Link from '@docusaurus/Link';
import { useColorMode } from '@docusaurus/theme-common';
import useIsBrowser from '@docusaurus/useIsBrowser';
import clsx from 'clsx';

import {
  CodebergIcon,
  GithubIcon,
  GitlabIcon,
} from '@site/src/components/icons';
import Elsewhere from '@site/src/components/landing/Elsewhere';
import Section from '@site/src/components/landing/Section';

import styles from './Software.module.css';
import FerdiumLogo from './ferdium.svg';
import refineryBackground from './refinery-background.png?placeholder=true&sizes[]=767&sizes[]=997&sizes[]=1534&sizes[]=1920&rl';
import RefineryLogo from './refinery-logo.svg';
import refineryScreenshotDark from './refinery-screenshot-dark.png?placeholder=true&sizes[]=997&sizes[]=1920&format=png&rl';
import refineryScreenshotLight from './refinery-screenshot-light.png?placeholder=true&sizes[]=997&sizes[]=1920&format=png&rl';

function ScreenshotImage() {
  // Force re-render in browser.
  // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36
  const isBrowser = useIsBrowser();
  const { colorMode } = useColorMode();
  const refineryScreenshot =
    colorMode === 'dark' ? refineryScreenshotLight : refineryScreenshotDark;

  const screenshot = (
    <img
      src={refineryScreenshot.src}
      srcSet={refineryScreenshot.srcSet}
      width={refineryScreenshot.width}
      height={refineryScreenshot.height}
      sizes="(min-width: 1440px) 767px, (min-width: 1384px) 659px, (min-width: 997px) calc(60vw - 64px), calc(100vw - 32px)"
      loading="lazy"
      alt=""
      className={styles.screenshot}
    />
  );

  return isBrowser ? screenshot : <noscript>{screenshot}</noscript>;
}

function Screenshot() {
  return (
    <div
      className={clsx(
        styles.software,
        styles['software--interactive'],
        styles['software--screenshot'],
      )}
      style={{
        aspectRatio:
          refineryScreenshotDark.width / refineryScreenshotDark.height,
      }}
    >
      <div className={clsx(styles.content, styles['content--screenshot'])}>
        <div
          className={clsx(
            styles.screenshot__backdrop,
            styles['screenshot__backdrop--light'],
          )}
          style={{
            aspectRatio:
              refineryScreenshotDark.width / refineryScreenshotDark.height,
            backgroundImage: `url(${refineryScreenshotDark.placeholder})`,
          }}
        />
        <div
          className={clsx(
            styles.screenshot__backdrop,
            styles['screenshot__backdrop--dark'],
          )}
          style={{
            aspectRatio:
              refineryScreenshotLight.width / refineryScreenshotLight.height,
            backgroundImage: `url(${refineryScreenshotLight.placeholder})`,
          }}
        />
        <ScreenshotImage />
        <div
          className={clsx(
            styles.overlay,
            styles['overlay--screenshot'],
            styles.description,
          )}
        >
          <p>
            <Link
              href="https://refinery.services"
              className={styles.screenshot__link}
            >
              Try Refinery in your browser
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export default function Software() {
  return (
    <div className={styles.wrapper}>
      <Section id="software" title="Software">
        <div className="container">
          <div className={styles['software-grid']}>
            <div
              className={clsx(
                styles.software,
                styles['software--interactive'],
                styles['software--refinery'],
              )}
            >
              <div
                className={clsx(styles.content, styles['content--refinery'])}
                style={{
                  backgroundImage: `url(${refineryBackground.placeholder})`,
                }}
              >
                <img
                  src={refineryBackground.src}
                  srcSet={refineryBackground.srcSet}
                  width={refineryBackground.width}
                  height={refineryBackground.height}
                  sizes="(min-width: 1440px) 767px, (min-width: 1384px) 659px, (min-width: 997px) calc(60vw - 64px), calc(100vw - 32px)"
                  loading="lazy"
                  alt=""
                  className={styles.refinery__background}
                />
                <h3 className={styles.refinery__heading}>
                  <RefineryLogo className={styles.refinery__logo} />
                  <Link
                    href="https://refinery.tools"
                    className={styles['cover-link']}
                  >
                    Refinery
                  </Link>
                </h3>
                <div className={styles.overlay}>
                  <div className={styles.description}>
                    <p>
                      I am a developer and maintainer of Refinery, an efficient{' '}
                      <b>graph solver</b> for generating{' '}
                      <b>well-formed models</b> and reasoning about{' '}
                      <b>interconnected systems.</b>
                    </p>
                  </div>
                  <div className={styles.refinery__buttons}>
                    <Link
                      href="https://refinery.services"
                      className={clsx(
                        'button',
                        'button--primary',
                        styles.button,
                      )}
                    >
                      Try now
                    </Link>
                    <Link
                      href="https://refinery.tools/learn/"
                      className={clsx(
                        'button',
                        'button--secondary',
                        styles.button,
                      )}
                    >
                      Read docs
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <Screenshot />
            <div
              className={clsx(
                styles.software,
                styles['software--interactive'],
                styles['software--ferdium'],
              )}
            >
              <div className={styles.ferdium__icon}>
                <FerdiumLogo
                  className={styles.ferdium__logo}
                  aria-hidden="true"
                />
              </div>
              <div
                className={clsx(styles.ferdium__content, styles.description)}
              >
                <p>
                  I also contributed to <b>Ferdium,</b> a desktop app that
                  combines and organizes <b>messaging apps</b> to take back{' '}
                  <b>user freedom.</b>{' '}
                  <Link
                    href="https://ferdium.org/"
                    className={styles['cover-link']}
                  >
                    Give it a spin!
                  </Link>
                </p>
              </div>
            </div>
            <div
              className={clsx(
                styles.software,
                styles['software--hosted'],
                styles.description,
              )}
            >
              <p>
                I host some{' '}
                <Link href="https://git.marussy.com">Git repositories</Link> and{' '}
                <Link href="https://jenkins.marussy.com">Jenkins CI</Link> to
                publish my own code and mirror software I contribute to or use.
              </p>
              <p>
                Take a look at the mirrors of{' '}
                <Link href="https://git.marussy.com/firejail/">Firejail</Link>{' '}
                and <Link href="https://git.marussy.com/sway/">sway</Link>. Here
                are my{' '}
                <Link href="https://git.marussy.com/gitmirror/">scripts</Link>{' '}
                for mirroring.
              </p>
            </div>
          </div>
          <Elsewhere
            label="See my other repositories at"
            links={[
              {
                href: 'https://github.com/kris7t/',
                icon: <GithubIcon />,
              },
              {
                href: 'https://gitlab.com/kris7t',
                icon: <GitlabIcon />,
              },
              {
                href: 'https://codeberg.org/marussy',
                icon: <CodebergIcon />,
              },
            ]}
          />
        </div>
      </Section>
    </div>
  );
}