import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import EditableText from 'components/EditableText';
import styles from './style.less';
import easyv_preview from 'images/easyv_preview.svg';
import easyv_publish from 'images/easyv_publish.svg';
import easyv_help from 'images/easyv_help.svg';
import { useDispatch, useSelector } from 'react-redux';
import { dispatchUpdatePortalBaseInfo, updatePortalById } from 'models/spaceship';
import EasyvModal, { useActionModalRef } from 'components/EasyvModal';
import PublishContent from '../PublishContent';
import { SpaceShipState } from 'models/spaceship.types';
import message from 'components/message';
import { RootState } from 'models';

interface Props {
  name: string;
  curSelectedKeys: SpaceShipState['curSelectedKeys'];
}

const Back = () => (
  <Link className={'icon iconfont icon-btn_arrowsleft ' + styles.back} to="/spaceShipList" />
);

const SpaceShipEditHeader = (props: Props) => {
  const { name = '未命名' } = props;
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curPortalBaseInfo } = spaceShip;
  const [display, setDisplay] = useState<boolean>(false);
  const id = Number(window.location.pathname.split('/').pop());
  const publishedModalRef = useActionModalRef();
  const dispatch = useDispatch();
  const publishedStatusChange = async (v) => {
    const hide = message.loading('更新状态...', 0);
    updatePortalById({ ...v }).then((res) => {
      if (res) {
        const { navigation, ...otherInfo } = res;
        dispatch(dispatchUpdatePortalBaseInfo(otherInfo));
        hide();
      }
    });
  };
  return (
    <div className={styles.header}>
      <Back />
      <EditableText
        text={name}
        className={styles.screenName}
        onCommit={(e) => dispatch(updatePortalById({ id, title: e }))}
      />
      <div className={styles.operate}>
        {!window.appConfig.LOCAL && (
          <div
            style={{ display: 'inline-block' }}
            onMouseEnter={() => setDisplay(true)}
            onMouseLeave={() => setDisplay(false)}>
            <span className={styles.item}>
              <img className={styles.icon} src={easyv_help} alt="" />
              <span className={styles.text}>帮助</span>
              <div className={styles.helpDropdown} style={{ display: display ? 'block' : 'none' }}>
                <a
                  className={styles.li}
                  href="https://dtstack.yuque.com/books/share/857405df-2200-4fc9-b9c3-7d8579fa38be/qbo1qx"
                  target="_blank">
                  帮助中心
                </a>
                <a
                  className={styles.li}
                  href={`${window.appConfig.HOME_URL}/video-center`}
                  target="_blank">
                  视频中心
                </a>
              </div>
            </span>
          </div>
        )}
        <Link to={`/spaceShipPreview/${id}`} target="_blank" className={styles.item} rel="noopener">
          <img className={styles.icon} src={easyv_preview} alt="" />
          <span className={styles.text}>预览</span>
        </Link>
        <span className={styles.item} onClick={() => publishedModalRef.current?.show()}>
          <img className={styles.icon} src={easyv_publish} alt="" />
          <span className={styles.text}>发布</span>
        </span>
      </div>

      <EasyvModal.ActionModal
        ref={publishedModalRef}
        footer={null}
        title="发布"
        content={
          <PublishContent onChange={publishedStatusChange} curPortalBaseInfo={curPortalBaseInfo} />
        }
      />
    </div>
  );
};

export default SpaceShipEditHeader;
