import EasyvButton from 'components/EasyvButton';
import EasyvModal, { ActionModalProps, ActionModalRef } from 'components/EasyvModal';
import message from 'components/message';
import classnames from 'classnames';
import { updateComponentConfig } from 'models/component';
import React, { forwardRef, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import PasteMultipleComponent from './PasteMultipleComponent';
import PasteOneComponent from './PasteOneComponent';
import styles from './style.less';
import { ComConfigType, PasteMultipleComponentRef, PasteOneComponentRef } from './type';

interface ComponentStylePasteModalProps extends ActionModalProps {
  comConfigList: ComConfigType[];
}

const ComponentStylePasteModal = forwardRef<ActionModalRef, ComponentStylePasteModalProps>((props, ref) => {
  const { comConfigList = [], onOk } = props;
  const dispatch = useDispatch();

  const pasteOneComponentRef = useRef<PasteOneComponentRef>(null);
  const pasteMultipleComponentRef = useRef<PasteMultipleComponentRef>(null);
  const [checkedAllStatus, setCheckedAllStatus] = useState<'取消全选' | '全选'>('取消全选');

  return (
    <EasyvModal.ActionModal
      ref={ref}
      className={styles.container}
      destroyOnClose
      {...props}
      content={
        comConfigList.length ? (
          comConfigList.length === 1 ? (
            <PasteOneComponent
              onChangeCheckedAllStatus={(v) => setCheckedAllStatus(v)}
              ref={pasteOneComponentRef}
              comConfigList={comConfigList}
            />
          ) : (
            <PasteMultipleComponent
              onChangeCheckedAllStatus={(v) => setCheckedAllStatus(v)}
              ref={pasteMultipleComponentRef}
              comConfigList={comConfigList}
            />
          )
        ) : null
      }
      footer={
        <div className={styles.footer}>
          <div>
            <span
              className={classnames(styles.cancelSelect, {
                [styles.SelectAll]: checkedAllStatus === '全选'
              })}
              onClick={() => {
                if (comConfigList.length === 1) {
                  pasteOneComponentRef.current?.onCheckedAll();
                } else {
                  pasteMultipleComponentRef.current?.onCheckedAll();
                }
              }}>
              {checkedAllStatus}
            </span>
          </div>
          <div className={styles.btnContainer}>
            <EasyvButton onClick={props.onCancel}>取消</EasyvButton>
            <EasyvButton
              theme="primary"
              onClick={async (e) => {
                const newConfigs =
                  comConfigList.length === 1
                    ? pasteOneComponentRef.current?.getUpdateConfig()
                    : pasteMultipleComponentRef.current?.getUpdateConfig();
                if (!newConfigs?.length) {
                  message.error('暂未选择任何可粘贴的样式');
                  return;
                }
                const hide = message.loading('正在粘贴样式', 0);
                const result = await dispatch(updateComponentConfig(newConfigs));
                hide();
                if (result) {
                  message.success('样式粘贴成功');
                  onOk?.(e);
                }
              }}>
              确认
            </EasyvButton>
          </div>
        </div>
      }
    />
  );
});
export default ComponentStylePasteModal;
