import React, {
  useContext,
  memo,
  useState,
  useEffect,
  useImperativeHandle,
} from 'react';
import { Checkbox, Form, Input, Radio, Space, Tooltip } from 'antd';
import type { CheckboxChangeEvent, RadioChangeEvent } from 'antd/es/checkbox';

import type { IConfigComponent } from '@qx/flow';
import { QxParameterSetting } from '@qx/common';
import { QxIcon } from '@/components';
import _ from 'lodash';

import { isolationList, propagationList } from '../../setting-configs/start';
interface PropagationSettingProps {
  value: string;
  onChange: (val: string) => void;
  optionsList: {
    value: string;
    label: string;
    tips: string;
  }[];
}
const PropagationSetting: React.FC<PropagationSettingProps> = (props) => {
  const { value, onChange, optionsList } = props;

  return (
    <Radio.Group
      onChange={(e: RadioChangeEvent) => {
        onChange(e.target.value);
      }}
      value={value}
    >
      <Space direction="vertical">
        {(optionsList || []).map(
          (_options: { value: string; label: string; tips: string }) => {
            return (
              <Radio value={_options.value}>
                <span>{_options.label}</span>
                <Tooltip placement="right" title={_options.tips}>
                  <QxIcon
                    className={'qx-data-flow-tooltip-opt'}
                    type={'icon-frame-help'}
                  />
                </Tooltip>
              </Radio>
            );
          },
        )}
      </Space>
    </Radio.Group>
  );
};

const StartConfigComponent: React.FC<StartConfigComponentProps> =
  React.forwardRef((props, ref) => {
    const [form] = Form.useForm();

    useImperativeHandle(ref, () => ({
      validateFields: form.validateFields,
    }));

    const [values, setValues] = useState<{
      params: any[];
      enablePropagation: boolean;
      propagation: string;
      isolation: string;
    }>({
      params: [],
      enablePropagation: false,
      propagation: 'REQUIRED',
      isolation: 'REPEATABLE_READ',
    });

    useEffect(() => {
      if (_.isEmpty(props?.node?.data)) {
        return;
      }
      if (_.isEqual(props?.node?.data, values)) {
        return;
      }
      setValues(props?.node?.data);
    }, [props?.node?.data]);

    const onCheckedChange = (e: CheckboxChangeEvent) => {
      const _cloneVal = _.cloneDeep(values);
      setValues({
        ..._cloneVal,
        enablePropagation: e.target.checked,
      });
    };

    useEffect(() => {
      if (_.isEqual(props?.node?.data, values)) {
        return;
      }
      props.onChange(values);
    }, [values]);

    return (
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          enablePropagation: false,
          propagation: 'REQUIRED',
          isolation: 'REPEATABLE_READ',
        }}
      >
        <Form.Item name="params">
          <h3 className={'qx-flow-form__label-title'}>入参设置</h3>
          <p className={'qx-flow-form__label-tips'}>
            参数可以被后面的所有数据流节点使用
          </p>
          <QxParameterSetting
            value={values.params}
            onChange={(_v: any) => {
              console.log('参数 === ', _v);
            }}
          />
        </Form.Item>
        <Form.Item name="enablePropagation">
          <h3 className={'qx-flow-form__label-title'}>事务控制</h3>
          <Checkbox
            checked={values.enablePropagation}
            onChange={onCheckedChange}
          >
            设置事务的传播行为和隔离级别
          </Checkbox>
        </Form.Item>
        <Form.Item
          hidden={!values.enablePropagation}
          label="事务传播行为"
          name="propagation"
        >
          <PropagationSetting
            optionsList={propagationList}
            value={'REQUIRED'}
            onChange={(_v: string) => {
              const _cloneVal = _.cloneDeep(values);
              setValues({
                ..._cloneVal,
                propagation: _v,
              });
            }}
          />
        </Form.Item>
        <Form.Item
          hidden={!values.enablePropagation}
          label="事务隔离级别"
          name="isolation"
        >
          <PropagationSetting
            optionsList={isolationList}
            value={'REPEATABLE_READ'}
            onChange={(_v: string) => {
              const _cloneVal = _.cloneDeep(values);
              setValues({
                ..._cloneVal,
                isolation: _v,
              });
            }}
          />
        </Form.Item>
      </Form>
    );
  });

interface StartConfigComponentProps extends IConfigComponent {
  onChange: (values: any) => void;
}

export default memo(StartConfigComponent);