import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { PubSub } from 'ray-eventpool';
import Icon from 'amos-icon';
import { amosRequest } from 'amos-processor';
import { secExtUrl } from 'CONSTS/urlConsts';

import { Menu, Popover, Avatar } from 'amos-framework';
import { EYE_MODE_CHANGE, THEMES_CHANGE, THEMES_TOP_CHANGE } from 'CONSTS/topicConsts';
import Skin from './../../common/skin';

const MenuItem = Menu.Item;

const defaultSkins = [
  { id: 'dispatch', name: 'dispatch', type: 'systemDefault', text: '调派', icon: '/src/assets/skin/teal.jpg', bgColor: '#009587', skinUse: true },
  { id: 'teal', name: 'teal', type: 'system', text: '水鸭绿', icon: '/src/assets/skin/teal.jpg', bgColor: '#009587' },
  { id: 'indigo', name: 'indigo', type: 'system', text: '靛蓝', icon: '/src/assets/skin/indigo.jpg', bgColor: '#3F51B5' },
  { id: 'millennium', name: 'millennium', type: 'system', text: '千禧绿', icon: '/src/assets/skin/millennium.jpg', bgColor: '#3A7E59' },
  { id: 'cherry', name: 'cherry', type: 'system', text: '樱桃红', icon: '/src/assets/skin/cherry.jpg', bgColor: '#D22E2E' },
  { id: 'magenta', name: 'magenta', type: 'system', text: '绛紫', icon: '/src/assets/skin/magenta.jpg', bgColor: '#7A1EA1' },
  { id: 'golden', name: 'golden', type: 'system', text: '香槟金', icon: '/src/assets/skin/golden.jpg', bgColor: '#BB8235' },
  { id: 'default', name: 'default', type: 'system', text: '默认', icon: '/src/assets/skin/golden.jpg', bgColor: '#203957' },
  { id: 'solor', name: 'solor', type: 'system', text: '星空', icon: '/src/assets/skin/golden.jpg', bgColor: '#203957' }
];

class SysTools extends Component {

  static propTypes = {
    showText: PropTypes.bool,
    changeTheme: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {
      skins: defaultSkins,
      isThemeOpen: false
    };
  }

  componentWillMount() {
    this.pubsub_themeChange = PubSub.subscribe(THEMES_CHANGE, (topic, theme) => {
      this.onInitThemes();
    });
  }

  componentDidMount() {
    this.onInitThemes();
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.pubsub_themeChange);
  }

  /**
   * 初始化用户自己的主题集合
   */
  onInitThemes = () => {
    // amosRequest(`${secExtUrl.themesUrl}`,{ method: 'GET' }).then((data) => {
    //   this.setState({ skins: data.dataList || this.state.skins }, () => {
    //     let currentTheme = this.state.skins.filter(e => e.skinUse === true)[0];
    //     currentTheme && this.props.changeTheme(currentTheme);
    //   });
    // });
    this.setState({ skins: this.state.skins }, () => {
      let currentTheme = this.state.skins.filter(e => e.skinUse === true)[0];
      currentTheme && this.props.changeTheme(currentTheme);
    });
  }

  onEyeModeChange = (checked) => {
    PubSub.publish(EYE_MODE_CHANGE, checked);
  }

  onChangeTheme = (skin) => {
    let { skins } = this.state;
    skins.map(e => e.skinUse = e.id === skin.id);
    this.setState({ skins });
    // amosRequest(`${secExtUrl.saveUserThemsUrl}/${skin.id}`,{ method: 'PUT' }).then((data) => {
    //   PubSub.publish(THEMES_TOP_CHANGE, skin);
    this.onInitThemes();
    // });
  }

  closedPop = () => {
    this.setState({
      isThemeOpen: false
    });
  }

  render() {
    const { skins, isThemeOpen } = this.state;
    const { showText } = this.props;
    const theme = showText ? (
      <Popover
        align="right"
        content={<Skin skins={skins} onEyeModeChange={this.onEyeModeChange} changeTheme={this.onChangeTheme} closed={this.closedPop} />}
        triggerMode="click"
        open={isThemeOpen}
        className="skin-popover-wrapper"
      >
        <div><Icon icon="skin" />皮肤</div>
      </Popover>)
    : (
      <Popover
        align="right"
        content={<Skin skins={skins} onEyeModeChange={this.onEyeModeChange} changeTheme={this.onChangeTheme} closed={this.closedPop} />}
        triggerMode="click"
        open={isThemeOpen}
        className="skin-popover-wrapper"
      >
        <Icon icon="skin" />
      </Popover>);
    const cls = classnames('sys-tools', {
      'sys-tools-min': !showText
    });

    return (
      <div className={cls}>
        <Menu direction="horizontal">
          <MenuItem>{theme}</MenuItem>
          <MenuItem><Avatar src="/src/assets/user/normal.png" /></MenuItem>
        </Menu>
      </div>
    );
  }
}

export default SysTools;
