import React, { useContext, useState } from 'react';
import { Button } from '@easyv/antd';
import { Input } from '@easyv/react-gui';
import DataBoxList from './List';
import { Drawer } from '@easyv/react-gui';
import styles from '../index.less';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { DataContext, SettingContext } from './Context/index';
import { addDataContainer } from 'models/data-container';
import { CloseOutlined } from '@easyv/react-icons';
import message from 'components/message';

const { Search } = Input;

function Containers({ visible, onClose, addDataContainer }) {
  const { onSetEdit } = useContext(DataContext);
  const { onChange } = useContext(SettingContext);
  const [value, setValue] = useState('');
  const title = (
    <div className={styles.title}>
      <span>数据容器</span>
      <CloseOutlined
        onClick={() => {
          onClose?.();
        }}
        className={styles.icon}
      />
    </div>
  );
  const onAdd = async () => {
    // onAdd
    const hide = message.loading('创建中...', 0);
    const result = await addDataContainer();
    hide();
    result &&
      onSetEdit({
        type: 'create',
        data: result,
      });
  };

  const onInputChange = (e) => {
    const value = e.target.value.trim();
    setValue(value);
  };

  return (
    <Drawer
      closable={false}
      className={classNames(styles.drawer, styles.filter, styles.drawerTitle)}
      title={title}
      visible={visible}
      mask={false}
      width={334}
      onClose={onClose}>
      {visible && (
        <>
          <div className={styles.header}>
            <Search
              className={styles.search_input}
              placeholder="搜索数据容器"
              value={value}
              onChange={onInputChange}
              style={{ width: 206, height: 28 }}
            />
            <Button
              onClick={onAdd}
              style={{ margin: '0 6px', width: 28, height: 28, lineHeight: 1 }}
              type="primary"
              ghost
              icon={<i className="iconfont icon-icon_custom1"></i>}
            />{' '}
            <Button
              type="primary"
              ghost
              style={{ width: 56, height: 28, lineHeight: 1 }}
              onClick={() => {
                onChange({
                  type: 'open',
                });
              }}>
              管理
            </Button>
          </div>

          <ul
            className={styles.list}
            style={{ maxHeight: 'calc(100vh - 166px)', overflow: 'auto' }}>
            <DataBoxList search={value} />
          </ul>
        </>
      )}
    </Drawer>
  );
}

export default connect(undefined, {
  addDataContainer,
})(Containers);
