import React, { useState, useEffect } from 'react';
import {  useDispatch } from 'react-redux';
import { Empty } from '@easyv/antd';
import classNames from 'classnames';
import { Modal, Drawer, Checkbox, Button, ConfigProvider } from '@easyv/react-gui';
import { upgradeComponent } from 'models/component';
import styles from '../index.less';
import style from './UpgradeList.less';
import empty_img_simple from 'images/empty-img-simple.png';
import { CloseOutlined } from '@easyv/react-icons';

function UpgradeList({ visible, data, onClose }) {
  const [selected, setSelected] = useState<number[]>([]);
  const dispatch = useDispatch();
  const [modal, contextHolder] = Modal.useModal();
  const { confirm } = modal;
  const title = (
    <div className={styles.title}>
      <span>组件更新</span>
      <CloseOutlined
        onClick={() => {
          onClose?.();
        }}
        className={styles.icon}
      />
    </div>
  );
  useEffect(() => {
    if (!visible && selected.length > 0) {
      setSelected([]);
    }
  }, [visible]);

  useEffect(() => {
    if (selected.some((d) => !data.find((o) => o.id === d))) {
      setSelected(selected.filter((d) => data.find((o) => o.id === d)));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  const handleCheckAll = () => {
    if (data.length === 0) {
      return;
    }

    if (selected.length === data.length) {
      setSelected([]);
    } else {
      setSelected(data.map((d) => d.id));
    }
  };

  function showUpgradeConfirm() {
    confirm({
      title: '更新组件',
      content: '更新组件有可能导致组件不可用，如果有重要数据请备份大屏。是否确定要更新？',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch(upgradeComponent(selected));
      },
    });
  }

  return (
    <>
      <Drawer
        className={classNames(styles.drawer, styles.painter, styles.drawerTitle)}
        closable={false}
        title={title}
        placement="right"
        visible={visible}
        mask={false}
        width={331}
        onClose={onClose}>
        <div style={{ padding: '0 16px' }}>
          <div className={style.container}>
            <div className={style.header}>
              <Checkbox
                indeterminate={selected.length > 0 && selected.length < data.length}
                checked={selected.length > 0 && selected.length === data.length}
                onChange={handleCheckAll}>
                <span className={style.title}>可更新组件</span>
                <span className={style.count}>
                  （{selected.length}/{data.length}）
                </span>
              </Checkbox>
              <Button
                disabled={selected.length === 0}
                type="primary"
                size="small"
                className={selected.length ? style.update : ''}
                style={{ width: 56, height: 18, lineHeight: '8px' }}
                onClick={showUpgradeConfirm}>
                更新{' '}
              </Button>
            </div>
            <div className={classNames(style.list, { [style.empty]: data.length === 0 })}>
              {data.length > 0 ? (
                data.map((d) => (
                  <div className={style.item} key={d.id}>
                    <Checkbox
                      checked={selected.includes(d.id)}
                      onChange={() =>
                        setSelected((prev) =>
                          selected.includes(d.id)
                            ? prev.filter((o) => o !== d.id)
                            : prev.concat(d.id),
                        )
                      }>
                      <span className={style.name}>{d.name}</span>
                    </Checkbox>
                    <span>v{d.base.version}</span>
                  </div>
                ))
              ) : (
                <Empty
                  description={<span style={{ color: '#B4B7C1' }}>暂无数据</span>}
                  imageStyle={{ height: 25, marginBottom: 2 }}
                  image={empty_img_simple}
                />
              )}
            </div>
          </div>
        </div>
      </Drawer>
      <ConfigProvider>{contextHolder}</ConfigProvider>
    </>
  );
}

export default UpgradeList;
