import React, { useEffect } from 'react';
import styled from 'styled-components';
import { switchThemeTo } from '../themes/switchTheme';
import { SessionTheme } from '../themes/SessionTheme';

const StyledContent = styled.div`
  background-color: var(--background-primary-color);
  color: var(--text-primary-color);
  text-align: center;

  font-family: var(--font-default);
  font-size: 14px;
  height: 100%;
  width: 100%;

  img {
    padding: 12px;
    margin-top: 1rem;
  }

  a {
    color: var(--text-primary-color);
  }
`;

export const AboutView = () => {
  // Add debugging metadata - environment if not production, app instance name
  const states = [];

  if (window.getEnvironment() !== 'production') {
    states.push(window.getEnvironment());
  }
  if (window.getAppInstance()) {
    states.push(window.getAppInstance());
  }

  useEffect(() => {
    if (window.theme) {
      void switchThemeTo({
        theme: window.theme,
      });
    }
  }, [window.theme]);

  return (
    <SessionTheme>
      <StyledContent>
        <img src="images/session/session_icon.png" width="250" height="250" alt="session icon" />

        <div className="version">{`v${window.getVersion()}`}</div>
        <div className="commitHash">{window.getCommitHash() || ''}</div>
        <div className="environment">{states.join(' - ')}</div>
        <div>
          <a href="https://getsession.org">getsession.org</a>
        </div>
        <br />
        <div>
          <a className="privacy" href="https://getsession.org/privacy-policy">
            Privacy Policy
          </a>
          <br />
          <a className="privacy" href="https://getsession.org/terms-of-service/">
            Terms of Service
          </a>
        </div>
      </StyledContent>
    </SessionTheme>
  );
};