'use strict';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Img from '@ali/ice-img';
import './LandingIntroBanner.scss';
import { Button, Balloon, Icon } from '@icedesign/base';
import { Link } from 'react-router';
import { join } from 'path';

// 寻找背景图片可以从 https://unsplash.com/ 寻找
const backgroundImage =
  'https://img.alicdn.com/tfs/TB1cWGdnXGWBuNjy0FbXXb4sXXa-1900-898.png';
// 'https://img.alicdn.com/tfs/TB1u4nya25TBuNjSspcXXbnGFXa-2166-1444.jpg';
// 'https://img.alicdn.com/tfs/TB1AMsslgMPMeJjy1XcXXXpppXa-1900-810.jpg';
// 'https://img.alicdn.com/tfs/TB1j9kWgvDH8KJjy1XcXXcpdXXa-1680-870.jpg';

export default class LandingIntroBanner extends Component {
  static displayName = 'LandingIntroBanner';

  static propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
  };

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  // ICE: React Component 的生命周期
  // http://ice.alibaba-inc.com/docs/guide/intro-react#React-组件的生命周期
  componentWillMount() {}

  componentDidMount() {}

  componentWillReceiveProps(nextProps, nextContext) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  componentWillUnmount() {}

  render() {
    // 登录介绍页面默认撑满一屏高度
    return (
      <div className="landing-intro-banner" style={{ height: '100vh' }}>
        <div
          className="landing-intro-banner-background"
          style={{
            backgroundImage: 'url(' + backgroundImage + ')',
            backgroundPosition: 'center',
          }}
        />
        <div className="landing-intro-banner-content-wrapper">
          <div className="landing-intro-banner-content">
            <h2 style={styles.title}>让前端开发简单而友好</h2>
            <p style={styles.subTitle}>
              海量可复用物料，配套桌面工具极速构建前端应用，效率提升 100%
            </p>
            <div
              className="landing-intro-banner-buttons"
              style={{ textAlign: 'center', marginTop: 70 }}
            >
              <Link 
                style={styles.leftButton}
                to={join(window.routePrefix, '/iceworks')}>
                <Button
                  style={{
                    height: 50,
                    padding: '0 58px',
                    fontSize: 16,
                    marginBottom: '20px',
                  }}
                  type="primary"
                  size="large"
                >
                  立即下载<Icon type="download" size={'small'} />
                </Button>
              </Link>

              <Link
                to={join(window.routePrefix, '/block')}
              >
                <Button
                  style={{
                    height: 50,
                    padding: '0 58px',
                    fontSize: 16,
                    marginBottom: '20px',
                    color: '#3080FE',
                  }}
                  size="large"
                  type="normal"
                  // type="dark"
                  // shape="ghost"
                >
                  查看物料
                </Button>
              </Link>
            </div>

            <div style={{ marginTop: '80px', position: 'relative' }}>
              {/* <div style={styles.updateLogLinkWrap}>
                <a
                  style={styles.updateLogLink}
                  href="https://zhuanlan.zhihu.com/ice-design?topic=%E5%8F%91%E5%B8%83%E6%97%A5%E5%BF%97"
                  target="_blank"
                >
                  查看最新发布动态
                </a>
              </div> */}
              <div style={styles.gitContainer}>
                <iframe
                  style={styles.gitStar}
                  src="https://ghbtns.com/github-btn.html?user=alibaba&repo=ice&type=star&count=true&size=large"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  title: {
    textAlign: 'center',
    fontSize: '46px',
    letterSpacing: '4px',
    lineHeight: '60px',
    color: '#fff',
    marginBottom: 30,
  },
  subTitle: {
    fontSize: '20px',
    margin: 0,
    color: '#fff',
    textShadow: '#C8C8C8 1px 1px 2px',
    textAlign: 'center',
    lineHeight: '1.7em',
  },
  leftButton: {
    marginRight: 20,
  },
  gitStar: {
    border: 0,
    height: '32px',
    width: '145px',
    margin: '0 auto',
  },
  gitContainer: {
    marginTop: '30px',
    textAlign: 'center',
  },
  updateLogLinkWrap: {
    textAlign: 'center',
  },
  updateLogLink: {
    color: '#fff',
  },
};