import React, { useState } from 'react';
import { connect } from 'react-redux';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from '@easyv/react-gui';
import ThemeList from './List';
import styles from './index.less';

function ThemeSelect() {
  const [visible, setVisible] = useState(false);

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <>
      <div className={styles.theme}>
        <span
          className={styles.themeBtn}
          onClick={() => {
            setVisible(true);
          }}>
          <i style={{ fontSize: 12 }} className="icon iconfont icon-replace"></i> 主题风格{' '}
        </span>
        <Tooltip title="主题切换会对全部样式配置进行替换，建议在组件配置调整前使用，若过程中切换配置项发生覆盖，可支持撤回">
          <QuestionCircleOutlined className="whiteHover" />
        </Tooltip>
      </div>

      <ThemeList visible={visible} onMouseLeave={handleClose} />
    </>
  );
}

export default connect(null)(ThemeSelect);
