import React, { useState, useEffect } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { Select, TreeSelect } from '@easyv/antd';
import ConfirmModal from 'components/ConfirmModal';
import { getScreens } from 'models/screens';
import { listActions } from 'containers/interaction-list/models';
import { useMousetrapPause } from 'components/easyUse';
import { RootState } from 'models';
import styles from './CopyModal.less';
import message from 'components/message';

const Option = Select.Option;
const { TreeNode } = TreeSelect;

interface OwnerProps {
  mode: 'mobile' | 'screen';
  visible: boolean;
  loading: boolean;
  onCancel: () => void;
  onComplete: (id: number) => void;
}

type PropsFromRedux = ConnectedProps<typeof connector> & OwnerProps;

function CopyModal({ mode, visible, loading, screens = [], mobiles = [], onCancel, onComplete, getScreens, getMobiles }: PropsFromRedux) {
  const [value, setValue] = useState<string>();

  useEffect(() => {
    if (mode === 'mobile') {
      getMobiles();
    } else {
      getScreens();
    }
  }, []);

  useMousetrapPause(visible);

  const handleComplete = () => {
    if (value !== undefined) {
      onComplete(+value);
    } else {
      message.error('请选择需要复制到的大屏');
    }
  };

  const handleChange = (value) => {
    setValue(value);
  };

  return (
    <ConfirmModal visible={visible} title="复制到大屏" footer={true} onCancel={onCancel} onOk={handleComplete} confirmLoading={loading}>
      <div>
        {mode === 'mobile' ? (
          <TreeSelect
            showSearch
            allowClear
            dropdownClassName={styles.copyModal}
            value={value}
            placeholder="请选择需要复制到的大屏"
            style={{ width: '100%' }}
            onChange={handleChange}
            // treeDefaultExpandAll={true}
            treeNodeFilterProp="title">
            {mobiles.map((d) => {
              return (
                <TreeNode className={styles.treeNode} value={`${d.id}`} title={d.name} key={d.id} disabled>
                  {d.pages.map((v) => {
                    return <TreeNode value={`${v.id}`} title={v.name} key={v.id} />;
                  })}
                </TreeNode>
              );
            })}
          </TreeSelect>
        ) : (
          <Select
            showSearch
            dropdownClassName={styles.copyModal}
            value={value}
            placeholder="请选择需要复制到的大屏"
            style={{ width: '100%' }}
            onChange={handleChange}
            optionFilterProp="name">
            {screens.map((d) => {
              return (
                <Option key={d.screenId} name={d.screenName} value={`${d.screenId}`}>
                  {d.screenName}_{d.screenId}
                </Option>
              );
            })}
          </Select>
        )}
      </div>
    </ConfirmModal>
  );
}

function mapStateToProps({ screens, screensById, createApp, interactionList }: RootState) {
  const { id: screenId } = createApp;
  const screen = screensById[screenId];
  return {
    screens: screens.list.filter((d) => d.screenId !== screen.id && !d.deletedAt),
    mobiles: interactionList.list
  };
}

const mapDispatchToProps = {
  getScreens,
  getMobiles: listActions.getList
};

const connector = connect(mapStateToProps, mapDispatchToProps);

export default connector(CopyModal);
