/* global HOMEHUB_APP_VERSION */

import {Icon} from '@bthlabs/homehub-icons';
import React from 'react';

import {IconBTHLabs} from 'src/assets';
import {Button, Modal} from 'src/components';

import './AboutModal.scss';

export const AboutModal = (props) => {
  return (
    <Modal show={props.show} onClose={props.onClose}>
      <Modal.Body className="AboutModal">
        <div className="banner">
          <Icon icon={IconBTHLabs} size={40} />
          <div className="brand">
            <h4>
              BTHLabs HomeHub
            </h4>
            <h6>
              Version {HOMEHUB_APP_VERSION}
            </h6>
          </div>
        </div>
        <p>
          Copyright &copy; 2020-present BTHLabs. All rights reserved.
          <br/>
          Licensed under terms of Apache License, Version 2.0
        </p>
        <p>
          <small>
            This application includes the following code and assets:
            {' '}
            <a href="https://react-bootstrap.github.io/">React Bootstrap (MIT License)</a>
            {', '}
            <a href="https://redux.js.org/">Redux (MIT License)</a>
            {', '}
            <a href="https://react-redux.js.org/">React Redux (MIT License)</a>
            {', '}
            <a href="https://linea.io/">Linea Icons (CCBY License)</a>
            {', '}
            <a href="https://lodash.com/">Lodash (MIT License)</a>
            {', '}
            <a href="https://moment.github.io/luxon/">Luxon (MIT License)</a>
            {', '}
            <a href="https://github.com/JedWatson/classnames">Classnames (MIT License)</a>
            {', '}
            <a href="https://www.bthlabs.pl/">Rango (Apache License, Version 2.0)</a>.
            {' '}
            Weather data provided by OpenWeatherMap.
          </small>
        </p>
        <p className="text-right text-muted">
          <small>
            Workspace
            {' '}
            <span className="text-monospace">
              v{props.version}-{props.build}
            </span>
          </small>
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button size="sm" variant="primary" onClick={props.onClose}>
          Got it!
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
