import React, { memo, useState, useEffect, Fragment, useMemo } from 'react';
import { connect } from 'react-redux';
import Item from './Item';
import Loading from '../../components/Loading';
import DeleteConfirmModal from '../../components/DeleteConfirmModal/Modal';
import ExportModal from './ExportModal';
import { InteractionListState, listActions } from './models';
import styles from './List.less';
import { UserState } from 'models/user.types';
import orderBy from 'lodash/orderBy';
import EasyvNoData from 'components/EasyvNoData';

const List = (props: {
  sortType: InteractionListState['sortType'];
  loading: InteractionListState['loading'];
  data: InteractionListState['list'];
  search: InteractionListState['search'];
  copyable: boolean;
  getList: () => void;
  onUpdate: (x) => void;
  onPublish: (x) => void;
  onCopy: (x) => void;
  onDelete: ({ ids }: { ids: number[] | null[] }) => void;
}) => {
  const { loading, data, search, copyable, getList, onUpdate, onCopy, onDelete, sortType } = props;
  const [deleteId, setDeleteId] = useState(null);
  const [version, setVersion] = useState<'new' | 'old'>('new');
  const [exportId, setExportId] = useState(null);
  useEffect(() => {
    getList();
  }, []);

  const filterData =
    useMemo(() => {
      return orderBy(
        data.filter((d) => d.name.toLowerCase().includes(search.toLowerCase())),
        sortType === 'byCreatedAt' ? 'createdAt' : 'updatedAt',
        'desc'
      );
    }, [data, search, sortType]) || [];

  if (!loading && !filterData.length) {
    return <EasyvNoData text="没有相应的终端交互应用" />;
  }

  const handleShowDelete = (id) => {
    setDeleteId(id);
  };

  const handleCloseDelete = () => {
    setDeleteId(null);
  };

  const handleDelete = () => {
    onDelete({ ids: [deleteId] });
    setDeleteId(null);
  };

  const handleExport = (id, version) => {
    setVersion(version ? version : 'new');
    setExportId(id);
  };

  const handleCloseExport = () => {
    setExportId(null);
  };

  const exportApp = filterData.find((d) => d.id === exportId);
  return (
    <Fragment>
      <ul className={styles.container}>
        {filterData.map((d) => {
          return (
            <Item
              key={d.id}
              id={d.id}
              name={d.name}
              published={d.published}
              homePageId={d.pages[0].id}
              copyable={copyable}
              updateName={onUpdate}
              // onPublish={onPublish} //Easyv4.17版本需求、发布放到编辑里面发布
              onCopy={onCopy}
              onDelete={handleShowDelete}
              onExport={handleExport}
            />
          );
        })}
      </ul>
      {loading && <Loading />}
      {deleteId && <DeleteConfirmModal title={null} visible={!!deleteId} onClose={handleCloseDelete} onOk={handleDelete} />}
      {exportId && <ExportModal screens={[exportApp]} version={version} onClose={handleCloseExport} onComplete={handleCloseExport} />}
    </Fragment>
  );
};

function mapStateToProps({ interactionList, user }: { interactionList: InteractionListState; user: UserState }) {
  const { loading, list, search, sortType } = interactionList;
  return {
    loading,
    data: list,
    search,
    copyable: !(window.appConfig.LOCAL && user.userInfo.type === 'education'),
    sortType
  };
}

const mapDispatchToProps = {
  getList: listActions.getList,
  onUpdate: listActions.rename,
  onPublish: listActions.publish,
  onCopy: listActions.copy,
  onDelete: listActions.delete
};

export default connect(mapStateToProps, mapDispatchToProps)(memo(List));
