import React, { useContext, memo } from 'react';
import { useForm } from '@qx/form-render';
import { useDrawer } from '@qx/flow';
import { ConfigComponentFooter } from '../../components';
import QxFormRender from '@/packages/qx-form-generator/src/form-render';
import { loopSetting } from '../../setting-configs';
import styles from './index.less';
import type { IConfigComponent } from '@qx/flow';

const LoopConfigComponent: React.FC<LoopConfigComponentProps> = (props) => {
  const form = useForm();
  const { closeDrawer: cancel, saveDrawer: save } = useDrawer();

  const onSave = async () => {
    try {
      await form.submit();
      const values = form.getValues();
      console.log('values', values);
      save(values);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className={styles['qx-flow-single-records-config']}>
      <QxFormRender form={form} schema={LoopSetting} widgets={{}} watch={{}} />
      <ConfigComponentFooter onSave={onSave} onCancel={cancel} />
    </div>
  );
};

interface LoopConfigComponentProps extends IConfigComponent {}

export default memo(LoopConfigComponent);