/*
 * @Author: Nian Yi
 * @Date: 2022-04-15 00:57:02
 * @LastEditTime: 2022-04-27 14:50:01
 * @LastEditors: Nian Yi
 * @Description: 主题编辑组件
 * @FilePath: /easyvadmin/src/scripts/containers/screen-edit/components/RightZoneBar/ScreenTheme/EditeTheme.tsx
 * 奥利给
 */
import React, { useCallback, useEffect, useRef } from 'react';
import EasyvEditTheme, { EditThemeConfigType, EditThemeRef } from 'components/EasyvEditTheme';
import { ThemeType, Type, ThemeConfigType } from 'models/theme.types';
import styles from './index.less';
import { Space } from '@easyv/antd';
import EasyvButton from 'components/EasyvButton';
import { addThemeByNameAndConfig, updateThemeById } from 'services/theme';
import message from 'components/message';
import { useDispatch } from 'react-redux';
import { getThemesConfig } from 'models/theme';

type Props = {
  type: Type;
  model: 'add' | 'edit';
  visible?: boolean;
  curEditThemeConfig?: EditThemeConfigType;
  onCancel: () => void;
  closeModal: (id?: number) => void;
  onChange?: (themeConfig: ThemeConfigType) => void;
};

const EditeTheme = (props: Props) => {
  const dispatch = useDispatch();
  const ref = useRef<EditThemeRef>(null);
  const { curEditThemeConfig, onCancel, model, type, closeModal, onChange, visible = true } = props;

  useEffect(() => {
    visible && onChange(ref.current?.themeConfig.config);
  }, [visible]);

  const updateTheme = async () => {
    const result = await updateThemeById(ref.current?.themeConfig as ThemeType);
    if (result) {
      message.success('主题更新成功');
      closeModal?.(ref.current?.themeConfig.id);
      dispatch(getThemesConfig());
      document.getElementById('custom').scrollIntoView({ behavior: 'smooth' });
    } else {
      message.error('主题更新失败');
    }
  };

  const adddTheme = async () => {
    const hide = message.loading('主题保存中...');
    const result = await addThemeByNameAndConfig(ref.current?.themeConfig as EditThemeConfigType);
    if (result) {
      message.success('保存成功');
      closeModal?.(result.id);
      dispatch(getThemesConfig());
      document.getElementById('custom').scrollIntoView({ behavior: 'smooth' });
    } else {
      message.error('保存失败');
    }
    hide();
  };

  const onSaveTheme = useCallback(async () => {
    if (!ref.current?.themeConfig?.name.trim()) {
      message.warning('主题名称不能为空');
      return false;
    }
    if (model === 'add') {
      adddTheme();
    } else {
      updateTheme();
    }
  }, [model]);

  return (
    <div className={styles.themeBox} style={{ display: 'flex' }}>
      <EasyvEditTheme
        onChange={onChange}
        ref={ref}
        model={model}
        type={type}
        curEditThemeConfig={curEditThemeConfig}
      />
      <div className={styles.footer}>
        <Space>
          <EasyvButton onClick={onCancel}>取消</EasyvButton>
          <EasyvButton theme="primary" onClick={onSaveTheme}>
            保存主题
          </EasyvButton>
        </Space>
      </div>
    </div>
  );
};

export default EditeTheme;
