/**
 * Title: 地产详情
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useState } from 'react';
import { formatMessage } from 'umi-plugin-locale';
import FittedImage from 'react-fitted-image';
import { Modal } from 'antd';
import { QRCanvas } from 'qrcanvas-react';
import Header from '@/components/Header';
import config from '@/config';
import logo from '@/assets/bg_login.png';
import pAndroid from '@/assets/a_android.png';
import pIOS from '@/assets/a_ios.png';
import pTelegram from '@/assets/a_telegram.png';

import styles from './style.less';

const AboutPage: React.FC = () => {
  const [info, setInfo] = useState('');

  const showInfo = (
    <Modal
      visible={Boolean(info)}
      title={formatMessage({ id: 'common.prompt' })}
      footer={null}
      onCancel={() => setInfo('')}
    >
      <div className={styles.dlg}>
        {info && <QRCanvas options={{
          data: info,
          size: 240,
        }} />}
        <span>{info}</span>
      </div>
    </Modal>
  );

  return (
    <div className={styles.container}>
      <Header title={formatMessage({ id: 'about.title' })} />
      <div className={styles.body}>
        <div className="logo">
          <FittedImage src={logo} fit="cover" />
        </div>

        <span className="app-name">{formatMessage({ id: 'app.name' })}</span>
        <span className="app-desc">{formatMessage({ id: 'about.desc' })}</span>

        <div className={styles.content}>
          {(config.linkAndroid || config.linkIOS) && (
            <div className="section">
              <span className="title">{formatMessage({ id: 'about.appTitle' })}</span>
              <span className="desc">{formatMessage({ id: 'about.appDesc' })}</span>
              <div className="icon-list">
                {config.linkAndroid && <div className="icon-item" onClick={() => setInfo(config.linkAndroid)}>
                  <div className="icon-icon"><FittedImage src={pAndroid} /></div>
                  <span className="icon-name">Android</span>
                </div>}
                {config.linkIOS && <div className="icon-item" onClick={() => setInfo(config.linkIOS)}>
                  <div className="icon-icon"><FittedImage src={pIOS} /></div>
                  <span className="icon-name">iOS</span>
                </div>}
              </div>
            </div>
          )}
          {config.linkTelegram && (
            <div className="section">
              <span className="title">{formatMessage({ id: 'about.comTitle' })}</span>
              <span className="desc">{formatMessage({ id: 'about.comDesc' })}</span>
              <div className="icon-list">
                <div className="icon-item" onClick={() => setInfo(config.linkTelegram)}>
                  <div className="icon-icon"><FittedImage src={pTelegram} /></div>
                  <span className="icon-name">Telegram</span>
                </div>
              </div>
            </div>
          )}
          <div className="section">
            <span className="title">{formatMessage({ id: 'about.contact' })}</span>
            <span className="desc">{config.linkEmail}</span>
          </div>
        </div>

        <div>{formatMessage({ id: 'about.copyright' })}</div>
      </div>
      {showInfo}
    </div>
  );
}

export default AboutPage;