import React, { ReactElement, useState } from 'react';
import style from './index.less';
import { Select } from '@easyv/antd';
import { connect } from 'react-redux';
import { spaceItem } from 'models/space.types';
import { screensMove } from 'models/space';
import EasyvButton from 'components/EasyvButton';
import EasyvModal, { useActionModalRef } from 'components/EasyvModal';

const { Option } = Select;

function MoveSpace({
  children,
  spaceList,
  current,
  screenId,
  screensMove
}: {
  children: ReactElement;
  current: number;
  spaceList: spaceItem[];
  screenId: number;
  screensMove: (x) => any;
}) {
  const [toSpaceId, setToSpaceId] = useState<number>(current);
  const modalRef = useActionModalRef();

  const handleOk = () => {
    screensMove({
      toSpace: toSpaceId,
      screen: screenId
    });
    modalRef.current?.close();
  };

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

  return (
    <>
      <span
        style={{ textAlign: 'center' }}
        onClick={() => {
          modalRef.current?.show();
          setToSpaceId(current);
        }}>
        {children}
      </span>
      <EasyvModal.ActionModal
        ref={modalRef}
        footer={
          <EasyvButton theme="primary" disabled={toSpaceId === current} onClick={handleOk}>
            确定
          </EasyvButton>
        }
        title="移入工作空间"
        content={
          <div className={style.space}>
            <span style={{ minWidth: '60px' }}>空间名称：</span>
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <Select defaultValue={current} dropdownClassName={style.selectDrop} style={{ width: '100%' }} onChange={handleChange}>
                {spaceList.map((d) => (
                  <Option key={d.id} disabled={d.id === current} value={d.id}>
                    <div className={style.spaceName}>{d.name}</div>
                  </Option>
                ))}
              </Select>
            </div>
          </div>
        }
      />
    </>
  );
}

function mapStateToProps({ space }) {
  return {
    spaceList: space.list,
    current: space.current
  };
}

export default connect(mapStateToProps, {
  screensMove
})(MoveSpace);
