import React from 'react';
import { Icon, Button, Toast } from '@txdfe/at';
import SettingPanel from '../extension-setting-panel';
import exceed from '../../utils/api';
import './index.scss';

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      disableDialog: false,
      setting: {}
    };
  }
  disable = () => {
    this.fetch(false);
  }

  fetch = (enabled) => {
    const { objectId, objectType, item, onChange } = this.props;
    const { appId } = item;
    exceed.fetch({
      api: 'enableExtension',
      params: {
        organizationId: window.UILessConfig.orgId,
        objectId,
        appId,
      },
      data: {
        objectType,
        enabled
      }
    }).then(res => {
      if (res.data.success) {
        Toast.success({
          title: res.data.message,
          duration: 1000,
        });
        onChange(item, enabled);
      } else {
        Toast.error({
          title: res.data.message,
          duration: 1000,
        });
      }
    });
  }

  enable = () => {
    this.fetch(true);
  }

  onChangeSetting = (value, fieldItem) => {
    const { objectId, objectType, item } = this.props;
    const { appId } = item;
    const setting = Object.assign({}, this.state.setting);
    const fields = setting.fields;
    fields.forEach(settingItem => {
      if (settingItem.name === fieldItem.name) {
        settingItem.value = value;
      }
    });
    exceed.fetch({
      api: 'putSetting',
      params: {
        organizationId: window.UILessConfig.orgId,
        objectId,
        appId,
      },
      data: {
        objectType,
        setting: {
          fields,
        }
      }
    }).then(res => {
      if (res.data.success) {
        Toast.success({
          title: res.data.message,
          duration: 1000,
        });
        this.setState({
          setting
        });
      } else {
        Toast.error({
          title: res.data.message,
          duration: 1000,
        });
      }
    })
  }

  initSetting = () => {
    const { objectId, objectType, item } = this.props;
    const { appId } = item;
    exceed.fetch({
      api: 'getSetting',
      params: {
        organizationId: window.UILessConfig.orgId,
        objectId,
        appId,
      },
      data: {
        objectType,
      }
    }).then(res => {
      if (res.data.success) {
        this.setState({
          visible: true,
          setting: res.data.result,
        });
      }
      
    })
    
  }

  onClose = () => {
    this.setState({
      visible: false,
    });
  }
  render() {
    const { item, isAdmin, style } = this.props;
    const { visible, setting } = this.state;
    if (item.isEmpty) {
      return (
        <div className="uiless-extension-item-empty" style={style}></div>
      );
    }
    return (
      <>
        <div className="uiless-extension-item" style={style}>
          <img src={item.appIcon} />
          <div className="uiless-extension-item-info">
            <div className="uiless-extension-title-wrap">
              <span className="uiless-extension-title">
                {item.appName}
                { item.enabled && <Icon className="uiless-extension-enable-icon" type="tick-o-fill" /> }
              </span>
              {item.isFirstVisit && <span className="uiless-extension-new-tag">NEW</span>}  
            </div>
            <span className="uiless-extension-description">{item.appDescription}</span>
            {
              isAdmin && <div className="uiless-extension-control">
                {
                  item.enabled && <Button onClick={this.disable} size="xs" warning className="uiless-extension-control-button">关闭</Button>
                }
                {
                  !item.enabled && <Button onClick={this.enable} type="primary" size="xs" className="uiless-extension-control-button">开启</Button>
                }
                {
                  item.hasSetting && <Button onClick={this.initSetting} size="xs" className="uiless-extension-control-button">设置</Button>
                }
              </div>
            }
          </div>
        </div>
        <SettingPanel
          setting={setting}
          visible={visible}
          onClose={this.onClose}
          onChange={this.onChangeSetting}
        />
      </>
    )
  }
}

export default Item;