import React, { useContext, useState } from 'react';
import styles from '../../index.less';
import settingStyle from './index.less';
import { Drawer, Input } from '@easyv/react-gui';
import { Table } from '@easyv/antd';
import { useHistory } from 'react-router-dom';
import EasyvButton from 'components/EasyvButton';
import classnames from 'classnames';
import { CloseOutlined, SearchCircleOutlined } from '@easyv/react-icons';
import { SettingContext, DataContext } from '../Context/index';
import { ColumnsType } from '@easyv/antd/lib/table';
import { connect } from 'react-redux';
import { selectComponentWithId } from 'models/create-app';
import EasyvEmpty from 'components/EasyvEmpty';
import { sourceOptions } from 'constants/config';
const dataSourceOptions = [{ name: '静态数据', value: 'static' }].concat(sourceOptions);

function Setting({
  visible,
  selectComponentWithId,
}: {
  selectComponentWithId: (x, y) => any;
  visible: boolean;
}) {
  // const mappingTable = {};
  // dataSourceOptions.map((v, k) => {
  //   mappingTable[k] = v;
  // });
  const title = (
    <div className={settingStyle.title}>
      <span>数据容器管理</span>
      <CloseOutlined
        onClick={() => {
          onChange({
            type: 'close',
          });
        }}
        className={settingStyle.icon}
      />
    </div>
  );
  const [search, setSearch] = useState('');
  const history = useHistory();
  const { onChange } = useContext(SettingContext);
  const { list, onSetEdit } = useContext(DataContext);

  const dataSource = visible
    ? list
        .filter((d) => {
          return (
            dataSourceOptions.some((v) => v.name.includes(search) && d.dataType === v.value) ||
            d.name.includes(search) ||
            d.components.some((x) => x.name.includes(search))
          );
        })
        .map((d) => {
          return {
            id: d.id,
            key: d.id,
            name: d.name,
            dataType: d.dataType,
            components: d.components,
          };
        })
    : [];
  const openDataContainers = (value) => {
    onChange({
      //关掉“整理”
      type: 'close',
    });
    onSetEdit({
      type: 'edit',
      data: value,
    });
  };

  const linkComponent = ({ id }) => {
    selectComponentWithId(id, history);
  };

  const columns: ColumnsType = [
    {
      title: '数据容器',
      align: 'center',
      className: settingStyle.table,
      dataIndex: 'name',
      key: 'id',
      render: (text, record) => (
        <EasyvButton
          onClick={() => {
            openDataContainers(record);
          }}
          title={text}
          className={settingStyle.easyvButton}
          theme="ghost">{`${text}`}</EasyvButton>
      ),
    },
    {
      title: '数据源',
      dataIndex: 'dataType',
      className: settingStyle.table,
      align: 'center',
      key: 'id',
      render: (text) => {
        return dataSourceOptions.find((x) => x.value === text)?.name || text;
      },
    },
    {
      title: '接入组件',
      className: settingStyle.table,
      align: 'center',
      dataIndex: 'components',
      key: 'id',
      render: (text) =>
        text.length
          ? text.map((d) => (
              <EasyvButton
                onClick={() => {
                  linkComponent(d);
                }}
                title={d.name}
                className={settingStyle.easyvButton}
                key={d.id}
                theme="ghost">{`${d.name}`}</EasyvButton>
            ))
          : '无关联组件',
    },
  ];

  const onSearchChange = (e) => {
    const value = e.target.value.trim();
    setSearch(value);
  };

  return (
    <Drawer
      className={`${styles.drawer} ${settingStyle.filter}`}
      title={title}
      placement="right"
      visible={visible}
      mask={false}
      width={512}
      closable={false}>
      {visible ? (
        <div>
          <div
            className={classnames(styles.list, settingStyle.ul)}
            style={{ maxHeight: 'calc(100vh - 36px -64px)', overflow: 'auto' }}>
            <div className={settingStyle.header}>
              <Input
                value={search}
                onChange={onSearchChange}
                prefix={<SearchCircleOutlined />}
                placeholder="请搜索内容"
              />
            </div>
            <div>
              <Table
                locale={{
                  emptyText: (
                    <div style={{ margin: '40px 0' }}>
                      <EasyvEmpty />
                    </div>
                  ),
                }}
                pagination={false}
                dataSource={dataSource}
                columns={columns}
              />
            </div>
          </div>
        </div>
      ) : null}
    </Drawer>
  );
}
export default connect(undefined, {
  selectComponentWithId,
})(Setting);
