import React, { Fragment, useState, useCallback } from 'react';
import { connect } from 'react-redux';
import EditModal from 'containers/admin-panel/components/themePanel/EditModal';
import { createTheme } from 'models/theme';

function ThemeAdd({ children, createTheme }) {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = useCallback(
    async (values) => {
      setLoading(true);
      const result = await createTheme(values);
      setLoading(false);
      if (result) {
        setVisible(false);
      }
    },
    [createTheme]
  );

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

  return (
    <Fragment>
      <span onClick={() => setVisible(true)}>{children}</span>
      <EditModal visible={visible} confirmLoading={loading} onCancel={handleCancel} onOk={handleSubmit} />
    </Fragment>
  );
}

const mapDispatchToProps = {
  createTheme
};

export default connect(null, mapDispatchToProps)(ThemeAdd);
