import { OverPack } from 'rc-scroll-anim';
import axios from 'axios';
import QueueAnim from 'rc-queue-anim';
import React, { Component } from 'react';

import ProductFeature from './components/ProductFeature/';
import ProductFeatureDark from './components/ProductFeatureDark/';
import ProductFeatureDark2 from './components/ProductFeatureDark2/';
import SoftwareDownload from './components/SoftwareDownload/';

import './ICEWorks.less';

export default class extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  componentDidMount() {
    this.initChangelogs();
  }

  initChangelogs = () => {
    const changelogDatasource =
      'https://iceworks.oss-cn-hangzhou.aliyuncs.com/changelog.json';
    axios(changelogDatasource).then(({ data, status }) => {
      if (status === 200) {
        this.setState({
          changelogs: data,
        });
      } else {
        this.setState({
          changelogs: null,
        });
      }
    });
  };

  showBtnAnimate = () => {
    this.setState(
      {
        showBtnAnimate: true,
      },
      () => {
        setTimeout(() => {
          this.setState({
            showBtnAnimate: false,
          });
        }, 500);
      }
    );
  };

  renderChangeLogs = (changelogs = []) => {
    const renders = [];
    changelogs.forEach((v, key) => {
      renders.push(
        <h3 key={`${v.version}-title`} style={styles.featureTag}>
          v{v.version} <span style={styles.featureData}>{v.releaseDate}</span>
        </h3>
      );
      renders.push(
        <ol key={`${v.version}-content`}>
          {Array.isArray(v.changelog) &&
            v.changelog.map((desc, idx) => <li key={idx}>{desc}</li>)}
        </ol>
      );
    });
    return renders;
  };

  render() {
    const { changelogs } = this.state;

    return (
      <div className="iceworks-page" style={styles.container}>
        <SoftwareDownload />
        <ProductFeature
          title="模板自定义创建"
          desc="提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求"
          img={{
            url:
              'https://img.alicdn.com/tfs/TB1AC4BpL5TBuNjSspmXXaDRVXa-1816-878.png',
            width: 1816 / 2,
            height: 878 / 2,
          }}
        />
        <ProductFeatureDark2 />
        <ProductFeature
          title="布局自定义生成"
          desc="模板内置布局，同时提供交互式的定制功能生产专属布局"
          img={{
            url:
              'https://img.alicdn.com/tfs/TB1CbvHpTtYBeNjy1XdXXXXyVXa-1240-902.png',
            width: 1240 / 2,
            height: 902 / 2,
          }}
        />
        <ProductFeatureDark />
        <ProductFeature
          title="项目仪表盘插件化"
          desc="丰富多样的项目信息面板，页面信息，路由信息依赖管理等，配置专属的Iceworks界面"
          img={{
            url:
              'https://img.alicdn.com/tfs/TB1pPQppv1TBuNjy0FjXXajyXXa-1280-860.png',
            width: 1280 / 2,
            height: 860 / 2,
          }}
        />
        <OverPack always={false} playScale={0.5} style={styles.features}>
          <QueueAnim key="anim" type="bottom">
            <h1 key={5} style={styles.featureTitle}>
              更新历史
            </h1>
            {this.renderChangeLogs(changelogs)}
          </QueueAnim>
        </OverPack>
        <div style={styles.history} />
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '0 auto',
    overflow: 'hidden',
  },
  content: {
    display: 'flex',
    position: 'relative',
    // alignItems: 'center',
    overflow: 'hidden',
    minHeight: 'calc(100vh - 127px)',
  },
  featureItem: {
    fontSize: '20px',
    fontWeight: '400',
    textAlign: 'center',
    marginTop: '25px',
    marginBottom: '25px',
  },
  down: {
    position: 'absolute',
    width: '40px',
    left: 0,
    right: 0,
    bottom: '20px',
    margin: '0 auto',
  },
  downIcon: {
    display: 'inline-block',
    width: '20px',
    height: '20px',
    borderLeft: '2px solid #666',
    borderTop: '2px solid #666',
    transform: 'rotate(-135deg)',
  },
  features: {
    padding: '45px',
    backgroundColor: '#fff',
    borderRadius: '5px',
    minHeight: '100vh',
  },
  featureTag: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    fontSize: '20px',
    margin: '55px auto 20px auto',
  },
  featureData: {
    fontSize: '14px',
  },
  featureTitle: {
    textAlign: 'center',
    fontSize: '45px',
    fontWeight: '100',
  },
  // col: {
  //   // flex: '250px',
  // },
  // colRight: {
  //   flex: '1 0 280px',
  //   paddingLeft: '30px',
  //   marginTop: '25px',
  //   paddingRight: '100px',
  // },
  title: {
    fontSize: '45px',
    marginBottom: '10px',
  },
  para: {
    fontSize: '16px',
    marginBottom: '45px',
  },
  subtitle: {
    fontSize: '16px',
    fontWeight: 'normal',
  },
  description: {
    color: '#666',
    lineHeight: '22px',
  },
  image: {
    width: '100%',
  },
};