import React, { memo, useCallback, useState } from 'react';
import { connect } from 'react-redux';
import { Link, useHistory } from 'react-router-dom';
import EditableText from '../../../components/EditableText';
// import Gallery from './Gallery';
import ExportModal from '../../interaction-list/ExportModal';
import { appActions } from '../models';
import NotificationContainer from 'containers/screen-edit/components/ScreenHeader/NotificationContainer';
import styles from './index.less';
import { addPanel } from 'models/panel';
import { setScreenState } from 'models/screen-detail';
import CommentDelted from '../../screen-edit/components/ScreenHeader/CommentDeleted';

import {
  RecycleLightColored,
  PreviewLightColored,
  InformationLightColored,
  ApplicationLightColored,
  UploadLightColored
} from '@easyv/react-icons';

import CommponentModule from 'components/ScrreenHeaderModule';
import ScreenTools from 'components/ScreenTool';
import classnames from 'classnames';
import { useProductionInfo } from 'components/easyUse';
import { KEYS } from 'containers/screen-edit/components/ScreenHeader/index';

function Header({ isAppEditHome, id, name, addable, updateAppName, editionId, activatedState, setScreenState, addPanel }) {
  const history = useHistory();
  const productionInfo = useProductionInfo();
  const { isRenew } = productionInfo;
  const [exportVisible, setExportVisible] = useState(false);
  const [active, setActive] = useState(false);
  const handleUpdateName = useCallback(
    (value) => {
      updateAppName({ id, name: value });
    },
    [id]
  );

  const handleExport = () => {
    setExportVisible(true);
  };

  const handleCloseExport = () => {
    setExportVisible(false);
  };

  const exportState = () => {
    return editionId ? editionId === 'saas_vip' || isRenew : true;
  };
  const onActivate = (code) => {
    setTimeout(() => {
      setScreenState(activatedState && code === activatedState ? '' : code);
    }, 0);
  };

  const onPanel = async (code) => {
    await setScreenState(code);
    await addPanel(code?.includes('动态') ? 0 : 1);
    await setScreenState('');
  };

  return (
    <div className={styles.container}>
      {isAppEditHome ? (
        <Link className="icon iconfont icon-btn_arrowsleft" to="/app" />
      ) : (
        <a
          className="icon iconfont icon-btn_arrowsleft"
          onClick={() => {
            history.go(-1);
          }}
        />
      )}

      <EditableText className={styles.name} text={name} onCommit={handleUpdateName} />
      {addable && <CommponentModule active={activatedState === KEYS.COMPONENT} title={KEYS.COMPONENT} onActivate={onActivate} />}
      <CommponentModule active={activatedState === KEYS.PANEL} title={KEYS.PANEL} icon={<ApplicationLightColored />} onActivate={onPanel} />

      <ScreenTools />

      <CommentDelted
        setActive={(code) => {
          setActive(code);
          setScreenState('');
        }}>
        <span className={classnames([styles.menuItem, active ? styles.active : null])}>
          <RecycleLightColored className={styles.icon} />
          <span className={styles.text}>回收站</span>
        </span>
      </CommentDelted>

      <NotificationContainer />
      {exportState() ? (
        <span onClick={handleExport} className={styles.menuItem}>
          <UploadLightColored className={styles.icon} />
          <span className={styles.text}>导出</span>
        </span>
      ) : null}

      <Link to={`/app/preview/${id}`} target="_blank" className={styles.menuItem} rel="noopener">
        <PreviewLightColored className={styles.icon} />
        <span className={styles.text}>预览</span>
      </Link>

      {exportVisible && <ExportModal screens={[{ id, name }]} onClose={handleCloseExport} onComplete={handleCloseExport} />}
    </div>
  );
}

function mapStateToProps({ interactionEdit, screenDetail, user, createApp }) {
  const { id, name } = interactionEdit;
  const { activatedState } = screenDetail;
  const { leftCollapsed, rightCollapsed } = createApp;

  return {
    id,
    name,
    leftCollapsed,
    rightCollapsed,
    isAppEditHome: /\/app\/edit\/[0-9]+\/[0-9]+$/.test(window.location.pathname),
    activatedState,
    editionId: user.userInfo?.edition?.id,
    addable: !(window.appConfig.LOCAL && user.userInfo.type === 'education')
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addPanel(param) {
      dispatch(addPanel(param));
    },
    updateAppName(param) {
      dispatch(appActions.updateAppName(param));
    },
    setScreenState(param) {
      dispatch(setScreenState(param));
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Header));
