import React from 'react';
import { Tab, Icon, Badge } from '@txdfe/at';
import ExtensionPanel from './components/panel';

import './index.scss';
import exceed from './utils/api';
import Once from './components/once/Once';

class ExtendableNav extends React.Component {
  static defaultProps = {
    extendable: true
  }
  constructor(props) {
    super(props);
    this.state = {
      extendData: [],
      dialogVisible: false,
      loadingExtends: false,
      appstoreUrl: undefined,
    };

    const UILessconfig = props.UILessConfig || window.UILessConfig || {};

    exceed.interceptors.request.use((config) => {
      if (config && config.headers) {
        config.headers['x-requested-with'] = 'XMLHttpRequest';
        config.headers['Authorization'] = `Bearer ${UILessconfig.accessToken}`;
        config.headers['X-Tenant-Id'] = `${UILessconfig.orgId}`;
        config.headers['X-app-id'] = `${UILessconfig.appId}`;
      }
      return config;
    }, (error) => {
      return Promise.reject(error);
    });
  }

  componentDidMount() {
    this.fetchConfig();
    if (!this.props.extendable) {
      return false;
    }
    this.fetchData();
  }

  fetchConfig = () => {
    exceed.fetch({
      api: 'basicSetting',
    }).then(res => {
      if (res && res.data && res.data.result && res.data.result.sdkConfigs) {
        const data = res.data.result.sdkConfigs;
        this.setState({
          appstoreUrl: data.appstoreUrl
        });
      }
    });
  }

  componentDidUpdate(prevProps) {
    // extendable 重新开启时，重新fetchData
    if (this.props.extendable !== prevProps.extendable && this.props.extendable === true) {
      this.fetchData({ isRecordVisit: 'true' });
    }

    // extendable 关闭时，清空 extendData
    if (this.props.extendable !== prevProps.extendable && this.props.extendable === false) {
      this.setState({
        extendData: [],
      });
    }
  }

  fetchData = (query = {}) => {
    const { objectId, objectType, identifier } = this.props;
    exceed.fetch({
      api: 'getAllExtension',
      params: {
        organizationId: window.UILessConfig.orgId,
        objectId,
      },
      data: {
        objectType,
        identifier,
        ...query,
      }
    }).then(res => {
      if (res.data.success) {
        this.setState({
          loadingExtends: false,
          extendData: res.data.result.map(item => {
            return Object.assign({}, item, {
              title: item.settingValues ? (item.settingValues.name || item.appName) : item.appName,
              key: item.settingValues.appIdentifier,
            });
          }),
        });
      }
    });
  }

  onClick = (key) => {
    const { onClick, dataSource } = this.props;
    const item = dataSource.find(item => item.key === key) || this.state.extendData.find(item => item.key === key);
    if (item) {
      onClick(item.key, item);
    }
  }

  openDialog = (e) => {
    this.fetchData({ isRecordVisit: 'true' })
    this.setState({
      loadingExtends: true,
      dialogVisible: true,
    });
  };
  onClose = () => {
    this.setState({
      dialogVisible: false,
    });
  }

  onChange = (newItem, enabled) => {
    const data = [...this.state.extendData];
    data.forEach(item => {
      if (item.appId === newItem.appId) {
        item.enabled = enabled;
      }
    });
    this.setState({
      extendData: data
    });
    this.props.onChangeExtension && this.props.onChangeExtension(newItem, enabled);
  }

  render() {
    const { dataSource, isAdmin, onClick, objectId, objectType, extendable, ...others } = this.props;
    const { extendData, dialogVisible, loadingExtends, appstoreUrl } = this.state;
    const data = dataSource.concat(extendData.filter(item => item.enabled));

    const showDot = extendData.some(({ isFirstVisit }) => isFirstVisit);
    return (
      <>
        <Tab
          triggerType="click"
          {...others}
          onClick={this.onClick}
          className="uiless-extendable-nav"
          excessMode="dropdown"
        >
          {data.map(item => (
            <Tab.Item {...item} badge={item.badge} title={item.title} key={item.key} />
          ))}
          {extendable && (
            <Tab.Item
              className="uiless-extendable-nav-plus"
              title={
                <Once defaultValue={showDot}>
                  {
                    (value) => (
                      <Badge dot={value}>
                        <Icon onClick={this.openDialog} type="plus" />
                      </Badge>
                    )
                  }
                </Once>
              }
              key="plus"
            />
          )}
        </Tab>
        <ExtensionPanel
          loading={false}
          extendData={extendData}
          visible={dialogVisible}
          isAdmin={isAdmin}
          objectType={objectType}
          objectId={objectId}
          appstoreUrl={appstoreUrl}
          onChange={this.onChange}
          onClose={this.onClose}
          {...others}
        />
      </>
    )
  }
}

export default ExtendableNav;