/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Select } from '@easyv/antd';
import message from 'components/message';
import ConfirmModal from 'components/ConfirmModal';
import { listActions } from '../../interaction-list/models';
import styles from './index.less';

const Option = Select.Option;

function CopyModal({
  visible,
  loading,
  mobiles = [],
  onCancel,
  onComplete,
  getMobiles
}: {
  visible: boolean;
  loading: boolean;
  mobiles: { id: number; name: string }[];
  onCancel: () => void;
  onComplete: (number) => void;
  getMobiles: () => void;
}) {
  const [value, setValue] = useState<string>();
  useEffect(() => {
    getMobiles();
  }, []);

  const handleComplete = () => {
    if (value) {
      onComplete(+value);
    } else {
      message.error('请选择需要复制到的终端应用');
    }
  };

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

  return (
    <ConfirmModal
      visible={visible}
      title="复制到其他终端应用"
      footer={true}
      onCancel={onCancel}
      onOk={handleComplete}
      confirmLoading={loading}>
      <div>
        <Select
          showSearch
          value={value}
          placeholder="请选择需要复制到的终端应用"
          style={{ width: '100%' }}
          onChange={handleChange}
          dropdownClassName={styles.selectWrapper}
          optionFilterProp="name">
          {mobiles.map((d) => {
            return (
              <Option key={d.id} name={d.name} value={`${d.id}`}>
                {d.name}_{d.id}
              </Option>
            );
          })}
        </Select>
      </div>
    </ConfirmModal>
  );
}

function mapStateToProps({ interactionList, interactionEdit }) {
  return {
    mobiles: interactionList.list.filter((d) => d.id !== interactionEdit.id)
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getMobiles() {
      dispatch(listActions.getList());
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(CopyModal);
