// Edit account parameters.
import React from 'react';
import { FormattedMessage } from 'react-intl';

import { APP_NAME, LINK_CONTACT_US, LINK_PRIVACY_POLICY, LINK_TERMS_OF_SERVICE } from '../config.js';

// Renders as a real link when a destination is configured, or as inert (non-navigating) text
// otherwise -- same treatment auth-onboarding-view.jsx already gives its own placeholder
// 用户协议/隐私政策 links when there's no real page to send the user to.
function FlatLink({href, icon, children}) {
  return href ?
    <a href={href} className="flat-button" target="_blank"><i className="material-icons">{icon}</i> &nbsp;{children}</a> :
    <span className="flat-button"><i className="material-icons">{icon}</i> &nbsp;{children}</span>;
}

export default class AccSupportView extends React.PureComponent {
  render() {
    return (
      <div className="scrollable-panel">
        <div className="panel-form-column">
          <FlatLink href={LINK_CONTACT_US} icon="email">
            <FormattedMessage id="link_contact_us" defaultMessage="Contact Us" description="Ancor text for contacting us by email" />
          </FlatLink>
          <FlatLink href={LINK_TERMS_OF_SERVICE} icon="description">
            <FormattedMessage id="link_terms_of_service" defaultMessage="Terms of Service" description="Ancor text for terms of service link" />
          </FlatLink>
          <FlatLink href={LINK_PRIVACY_POLICY} icon="policy">
            <FormattedMessage id="link_privacy_policy" defaultMessage="Privacy Policy" description="Ancor text for privacy policy link" />
          </FlatLink>
        </div>
        <div className="hr" />
        <div className="panel-form-column">
          <div className="panel-form-row">
            <label className="small"><FormattedMessage id="label_client" defaultMessage="Client:"
              description="Label for a client version" /></label>
            {APP_NAME}
          </div>
          <div className="panel-form-row">
            <label className="small"><FormattedMessage id="label_server" defaultMessage="Server:"
              description="Label for a server version" /></label>
            {this.props.serverVersion}
          </div>
          <div className="panel-form-row">
            <label className="small"><FormattedMessage id="label_server_address" defaultMessage="Server address:" /></label>
            {this.props.serverAddress}
          </div>
        </div>
      </div>
    );
  }
};