/*
 * @Author: Nian Yi
 * @Date: 2022-05-23 13:57:10
 * @LastEditTime: 2022-05-27 14:59:34
 * @LastEditors: Nian Yi
 * @Description: 
 * @FilePath: /easyvadmin/src/scripts/containers/admin-panel/components/modulePanel/EditContainer.tsx
 * 奥利给
 */
import React, { memo, useState, useCallback } from 'react';
import { connect } from 'react-redux';
import EditModal from './EditModal';
import { updateModule } from 'models/module';
import EasyvTooltip from 'components/EasyvTooltip';
import classNames from 'classnames';
import styles from '../style.less';

function EditContainer({
  loading = false,
  categorys,
  id,
  name,
  thumb,
  needPaid = false,
  price = 0,
  category,
  updateModule
}: {
  loading?: boolean;
  categorys: any;
  id: number;
  name: string;
  needPaid:boolean;
  price?:number;
  thumb: string;
  category: number;
  published: boolean;
  updateModule: (param) => Promise<{}>;
}) {
  const [visible, setVisible] = useState(false);

  const handleCancel = useCallback(() => {
    setVisible(false);
  }, []);

  const handleOk = useCallback(async (values) => {
    const result = await updateModule({ ...values, id });
    if (result) {
      setVisible(false);
    }
  }, []);

  return (
    <span>
      <EasyvTooltip title="编辑">
        <i className={classNames('icon iconfont icon-custom ' + styles.iconHover)} onClick={() => setVisible(true)} />
      </EasyvTooltip>
      <EditModal
        needPaid={needPaid}
        price={price}
        visible={visible}
        confirmLoading={loading}
        categorys={categorys}
        name={name}
        thumb={thumb}
        category={category}
        onCancel={handleCancel}
        onOk={handleOk}
      />
    </span>
  );
}

const mapStateToProps = ({ modules }) => {
  return {
    categorys: modules.categorys
  };
};

const mapDispatchToProps = {
  updateModule
};

export default connect(mapStateToProps, mapDispatchToProps)(memo(EditContainer));
