/**
 * 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 pWeb from '@/assets/a_web.png';
import pTelegram from '@/assets/a_telegram.png';
import pWechat from '@/assets/a_wechat.png';

import styles from './style.less';

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

  const showInfo = (
    <Modal
      visible={Boolean(info)}
      title={title}
      footer={null}
      onCancel={() => setInfo('')}
    >
      <div className={styles.dlg}>
        {info && <QRCanvas options={{
          data: info,
          size: 240,
        }} />}
        <br/>
        <span><a href={info} target="_blank">{info}</a></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 || config.linkWeb) && (
            <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);
                      setTitle('Android');
                    }}
                  >
                    <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);
                      setTitle('iOS');
                    }}
                  >
                    <div className="icon-icon"><FittedImage src={pIOS} /></div>
                    <span className="icon-name">iOS</span>
                  </div>
                )}
                {config.linkWeb && (
                  <div
                    className="icon-item"
                    onClick={() => {
                      setInfo(config.linkWeb);
                      setTitle('Web');
                    }}
                  >
                    <div className="icon-icon"><FittedImage src={pWeb} /></div>
                    <span className="icon-name">Web</span>
                  </div>
                )}
              </div>
            </div>
          )}
          <br/>
          {(config.linkTelegram || config.linkWechat) && (
            <div className="section">
              <span className="title">{formatMessage({ id: 'about.comTitle' })}</span>
              <span className="desc">{formatMessage({ id: 'about.comDesc' })}</span>
              <div className="icon-list">
                {config.linkAndroid && (
                  <div
                    className="icon-item"
                    onClick={() => {
                      setInfo(config.linkTelegram);
                      setTitle('Telegram');
                    }}
                  >
                    <div className="icon-icon"><FittedImage src={pTelegram} /></div>
                    <span className="icon-name">Telegram</span>
                  </div>
                )}
                {config.linkWechat && (
                  <div
                    className="icon-item"
                    onClick={() => {
                      setInfo(config.linkWechat);
                      setTitle('Wechat');
                    }}
                  >
                    <div className="icon-icon"><FittedImage src={pWechat} /></div>
                    <span className="icon-name">Wechat</span>
                  </div>
                )}
              </div>
            </div>
          )}
          <br/>
          <div className="section">
            <span className="title">{formatMessage({ id: 'about.contact' })}</span>
            <span className="desc">{config.linkHomeweb}</span>
          </div>
        </div>
        <br/>
        <div>{formatMessage({ id: 'about.copyright' })}</div>
      </div>
      {showInfo}
    </div>
  );
}

export default AboutPage;
