import React, { FC, useEffect, useState } from 'react';
import { RouteComponentProps } from '@reach/router';
import { Alert, Button } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import CopyToClipboard from 'react-copy-to-clipboard';

import './Config.css';

const Config: FC<RouteComponentProps> = () => {
  const [config, setConfig] = useState(null);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    fetch('../api/v1/status/config')
      .then(res => res.json())
      .then(res => setConfig(res.data.yaml))
      .catch(error => setError(error.message));
  }, []);

  return (
    <>
      <h2>
        Configuration&nbsp;
        <CopyToClipboard
          text={config ? config! : ''}
          onCopy={(text, result) => {
            setCopied(result);
            setTimeout(setCopied, 1500);
          }}
        >
          <Button color="light" disabled={!config}>
            {copied ? 'Copied' : 'Copy to clipboard'}
          </Button>
        </CopyToClipboard>
      </h2>

      {error ? (
        <Alert color="danger">
          <strong>Error:</strong> Error fetching configuration: {error}
        </Alert>
      ) : config ? (
        <pre className="config-yaml">{config}</pre>
      ) : (
        <FontAwesomeIcon icon={faSpinner} spin />
      )}
    </>
  );
};

export default Config;