import React, { memo, useCallback } from 'react';
import { Link } from 'react-router-dom';
import EditableText from '../../components/EditableText';
import styles from './Item.less';
import { connect } from 'react-redux';
import classnames from 'classnames';
import SynchronizationModal from 'containers/screen-list/components/SynchronizationModal';
import EasyvButton from 'components/EasyvButton';
import EasyvTooltip from 'components/EasyvTooltip';
import classNames from 'classnames';
import Space from 'components/Space';
import EasyvModal, { useConfirmRef } from 'components/EasyvModal';
import { useAuth, useProductionInfo } from 'components/easyUse';
import FileCard from 'components/FileCard';

function Item({ name, id, published, homePageId, copyable, updateName, onCopy, onDelete, onExport, editionId, prefixCls = 'interaction' }) {
  const productionInfo = useProductionInfo();
  const { isRenew } = productionInfo;
  const exportRef = useConfirmRef();
  const { checkAuth } = useAuth();
  const handleUpdate = useCallback(
    (name) => {
      updateName({
        id,
        name
      });
    },
    [id]
  );

  const handleCopy = useCallback(() => {
    onCopy({ ids: [id] });
  }, [id]);

  const handleDelete = useCallback(() => {
    onDelete(id);
  }, [id]);

  // TODO 终端导出和大屏导出逻辑一致后续可优化
  const exportState = () => {
    return editionId ? editionId === 'saas_vip' || isRenew : true;
  };

  return (
    <>
      <FileCard
        appPreviewImgUrl={null}
        hoverRenderNode={
          <div className={`${prefixCls}-img-operate`}>
            <Space size={16}>
              {exportState() ? (
                <EasyvTooltip title="导出">
                  <i
                    className="icon iconfont icon-daochu"
                    onClick={() => {
                      exportRef.current?.show();
                    }}
                  />
                </EasyvTooltip>
              ) : null}
              {copyable && (
                <EasyvTooltip title="复制">
                  <i onClick={handleCopy} className="icon iconfont icon-zd_fuzhi" />
                </EasyvTooltip>
              )}
              {checkAuth('screenSynchronization') && (
                <SynchronizationModal screenId={id}>
                  <EasyvTooltip title="同步">
                    <i className={classnames(`icon iconfont icon-wenjiantongbu`)} />
                  </EasyvTooltip>
                </SynchronizationModal>
              )}
              <EasyvTooltip title="删除">
                <i className="icon iconfont icon-zd_shanchu" onClick={handleDelete} />
              </EasyvTooltip>
            </Space>
            <div>
              <Space size={12}>
                <Link className={styles.right} target="_blank" rel="noopener" to={`/app/preview/${id}`}>
                  <EasyvButton theme="default" style={{ marginRight: '12px' }}>
                    预览
                  </EasyvButton>
                </Link>
                <Link to={`/app/edit/${id}/${homePageId}`}>
                  <EasyvButton theme="primary">编辑</EasyvButton>
                </Link>
              </Space>
            </div>
          </div>
        }
        renderFooter={
          <div className={`${prefixCls}-content`}>
            <EditableText
              className={styles.screenName}
              text={name}
              onCommit={handleUpdate}
              suffix={
                <div className={styles.box}>
                  <i className={classNames('icon iconfont icon-bianji screenItem-content-editIcon')} />
                  {published ? (
                    <span className={`${prefixCls}-content-screenStatus`}>
                      <i className={`${prefixCls}-content-screenStatus-statusIcon`} />
                      已发布
                    </span>
                  ) : (
                    <span className={`${prefixCls}-content-screenStatus`}>
                      <i className={`${prefixCls}-content-screenStatus-statusIcon`} style={{ background: '#B4B7C1' }} />
                      未发布
                    </span>
                  )}
                </div>
              }
            />
          </div>
        }
      />
      <EasyvModal.Confirm
        title="导出"
        content="您确定要导出该终端吗?"
        ref={exportRef}
        onOk={() => {
          onExport(id);
          exportRef.current?.close();
        }}
      />
    </>
  );
}
function mapStateToProps({ user }) {
  const { userInfo } = user;
  const { edition = {} } = userInfo;
  const editionId = edition?.id;

  return {
    editionId
  };
}

export default connect(mapStateToProps)(memo(Item));
