/* eslint-disable array-callback-return */
/* eslint-disable eqeqeq */
import {
  SnippetsOutlined,
} from '@ant-design/icons';
import {
  Button,
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
  Space,
  Table,
  Divider,
  message,
} from 'antd';
import type { FormInstance } from 'antd/es/form';
import React, {
  useCallback,
  useEffect,
  useState,
} from 'react';
import JSONEditor from './codeMirror';
import './style.less';
import { QxFieldSetter, QxFormSelect } from '@qx/common';
import { formatEnum } from './constant';
import {
  typeTranslateFieIdtype,
  typeTranslateWidget,
  typeTranslateGrouptype,
  // typeTranslateItemtype,
} from './constant';
// import { Controlled as CodeMirror } from 'react-codemirror2'
import { cloneDeep } from 'lodash-es';
import moment from 'dayjs';
import { QxBaseIcon } from '@qx/common';
import Icon from '@ant-design/icons';
import { SubNodeIcon } from './sub-node-icon';

type ValueOptionProps = {
  key: number | string;
  value: string;
};

const valueOptions = [
  { key: 'STRING', title: '文本' },
  { key: 'NUMBER', title: '数字' },
  { key: 'TIME', title: '日期' },
  { key: 'BOOL', title: '布尔' },
  { key: 'OBJECT', title: '对象' },
  { key: 'ARRAY', title: '数组' },
  /*{ key: 'ANNEX', title: '附件' },
  { key: 'PIC', title: '图片' },*/
  { key: 'FORM', title: '表单' },
  { key: 'USER', title: '人员' },
  { key: 'ORG', title: '部门' },
];

const timeFormat = [
  { label: '年', value: 'YEAR' },
  { label: '年-月', value: 'YEAR_MONTH' },
  { label: '年-月-日', value: 'YEAR_DATE' },
  { label: '年-月-日 时', value: 'YEAR_HOUR' },
  { label: '年-月-日 时:分', value: 'YEAR_MIN' },
  { label: '年-月-日 时:分:秒', value: 'YEAR_SEC' },
];

interface ParameterSettingProps {
  nodeItem?: any;
  inputKey: any;
  data: any;
  treeData: any;
  visible: boolean;
  handleCancel: (val: any) => void;
  handleChangeField: (val?: any, data?: any) => void;
  handleChange: (e?: any, data?: any, code?: string) => void;
  handleDrop: (val: any) => void;
  handleAddTree: (val: any) => void;
  handleAdd: (val: any) => void;
  handleDelete: (val: any) => void;
  request?: any;
  nodeType?: string | 'START' | 'END';
  appId?: string; // 当前应用ID
}
const EditableContext = React.createContext<FormInstance<any> | null>(null);

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log('onChange', e);
  e.persist();
  const { value } = e.target;
  console.log('onChange value', value);
  // if (!value) {
  //   setExpandedKeys(undefined);
  //   setAutoExpandParent(false);
  //   setSearchValue(value);
  //   return;
  // }
  // const newExpandedKeys = (list || [])
  //   .map((item) => {
  //     if (item.title.indexOf(value) > -1 || item.code.indexOf(value) > -1) {
  //       return getParentKey(item.id, treeData);
  //     }
  //     return null;
  //   })
  //   .filter((item, i, self) => item && self.indexOf(item) === i);
  // setExpandedKeys(newExpandedKeys as React.Key[]);
  // setSearchValue(value);
  // setAutoExpandParent(true);
};



const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
  const {
    visible,
    data,
    treeData,
    handleCancel,
    handleDrop,
    handleAdd,
    handleAddTree,
    handleDelete,
    handleChange,
    handleChangeField,
    inputKey,
    nodeType,
  } = props;
  // const [form] = Form.useForm()
  //判断数组是否只有一个子节点
  const checkShowAdd = (_data: any) => {
    const _newTreeData = cloneDeep(treeData);
    if (!!_data.pid) {
      const pidIndex = _newTreeData.findIndex(
        (item: any) => item.id === _data.pid,
      );
      if (_newTreeData[pidIndex].type == 'ARRAY') {
        return false;
      }
    }
    return true;
  };

  const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
    const widget = typeTranslateWidget(item.type);
    if (widget === 'userSelector') {
      return [];
      // return [{key: 'MYSELF', value: "当前用户"}]
    }
    if (widget === 'orgSelector') {
      // return [{key: 'MY_ORG', value: "当前人所在部门"}]
      return [];
    }
    if (widget === 'qxDatetime') {
      return [{ key: 'NOW', value: '当前时间' }];
    }
    return undefined;
  };

  const checkShowTree = (_data: any) => {
    if (_data.type == 'ARRAY') {
      if (_data.child && _data.child.length > 0) {
        return false;
      }
    }
    return true;
  };

  const columns = [
    {
      title: (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <span style={{ color: 'red' }}>*</span>
          <span>参数编码</span>
        </div>
      ),
      dataIndex: 'code',
      width: '12%',
      key: 'code',
      render: (text, record) => (
        < Form.Item
          name={'code' + record.id}
          style={{ margin: 0 }}
        // initialValue={record.code}
        >
          <Input
            defaultValue={record.code}
            bordered={false}
            disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'code')} />
        </Form.Item >
      ),
    },
    {
      title: (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <span style={{ color: 'red' }}>*</span>
          <span>参数名</span>
        </div>
      ),
      dataIndex: 'title',
      width: '12%',
      key: 'title',
      render: (text, record) => (
        <Form.Item
          name={'title' + record.id}
          style={{ margin: 0 }}
        // initialValue={record.title}
        >
          <Input
            defaultValue={record.title}
            bordered={false}
            disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'title')} />
        </Form.Item>
      ),
    },
    {
      title: (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <span style={{ color: 'red' }}>*</span>
          <span>参数类型</span>
        </div>
      ),
      dataIndex: 'type',
      width: '8%',
      key: 'type',
      render: (text, record) =>
        <Form.Item
          style={{ margin: 0 }}
          name={'type' + record.id}
        // initialValue={record.type}
        >
          <Select
            bordered={false}
            disabled={record.disabled}
            defaultValue={record.type}
            onSelect={(e) => handleChange(e, record, 'type')} >
            {
              valueOptions.map((item) => {
                return <Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>;
              })
            }
          </Select>
        </Form.Item>
    },
    {
      title: '默认值',
      dataIndex: 'valueMapping',
      width: '13%',
      key: 'valueMapping',
      render: (text, record) =>
        <div className="editable-cell ">
          <QxFieldSetter
            value={record.valuesObj || []}
            params={{ appCode: 'appCode', useId: true }}
            valueOptions={getValueOptions(record)}
            field={record.type}
            widget={typeTranslateWidget(record.type)}
            fieldType={typeTranslateFieIdtype(record.type)}
            fieldGroupType={typeTranslateGrouptype(record.type)}
            isMixValue={typeTranslateFieIdtype(record.type) === 'STRING'}
            isMultiple={false}
            colsTree={props.nodeItem}
            showFieldOpt={!(nodeType === 'START')}
            // onChange={debounce((val) => handleField(val), 700)}
            onChange={(val) => handleChangeField(val, record)}
          />
        </div>
    },
    {
      title: '参数说明',
      dataIndex: 'description',
      key: 'description',
      render: (text, record) => (
        <Form.Item
          name={'description' + record.id}
          style={{ margin: 0 }}
        // initialValue={text}
        >
          <Input
            key={inputKey}
            defaultValue={text}
            bordered={false}
            disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'description')} />
        </Form.Item>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: '8%',
      render: (text, record) => {
        const isShowAdd = (record && checkShowAdd(record));
        const isShowTree = (record && checkShowTree(record));
        return (
          <Space size="small">
            {isShowAdd && (
              <Button
                size={'small'}
                type="link"
                disabled={record.disabled}
                icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />}
                onClick={() => handleAdd(record.pid)}
              />
            )}
            {(record.type === 'OBJECT' || record.type === 'ARRAY') &&
              isShowTree && (
                <Button
                  size={'small'}
                  type="link"
                  disabled={record.disabled}
                  icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />}
                  onClick={() => handleAddTree(record.id)}
                />
              )}
            <Button
              size={'small'}
              type="link"
              className="btn-high-del"
              disabled={record.disabled}
              icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
              onClick={() => handleDelete(record)}
            />
          </Space>
        );
      },
    },
  ];

  const range = {
    title: '取值范围',
    dataIndex: 'qxProps',
    editable: true,
    key: 'qxProps',
    render: (qxProps: any, record: any) => {
      switch (record.type) {
        case 'STRING':
          return (
            <div
              key={record.id}
              className="editable-cell"
            >
              <Form.Item
                name={'qxProps-min'}
                style={{ margin: 0 }}
              >
                <InputNumber
                  bordered={false}
                  min={0}
                  precision={0}
                  onBlur={(e) => handleChange(e, record, 'qxProps-min')}
                  defaultValue={qxProps.min}
                  placeholder="最小长度"
                />
              </Form.Item>
              <div className='range-cell'>-</div>
              <Form.Item
                name={'qxProps-max'}
                style={{ margin: 0 }}
              >
                <InputNumber
                  min={0}
                  bordered={false}
                  precision={0}
                  defaultValue={qxProps.max}
                  onBlur={(e) => handleChange(e, record, 'qxProps-max')}
                  placeholder="最大长度"
                />
              </Form.Item>
            </div>
          );
        case 'NUMBER':
          return (
            <div
              key={record.id}
              className="editable-cell"
            >
              <div className='range-cell'>
                <Form.Item
                  name={'qxProps-min'}
                  style={{ margin: 0 }}
                >
                  <InputNumber
                    precision={qxProps.precision || 0}
                    bordered={false}
                    size='small'
                    defaultValue={qxProps.min}
                    onBlur={(e) => handleChange(e, record, 'qxProps-min')}
                    style={{ width: '110px' }}
                    placeholder="最小值"
                  />
                </Form.Item>
                -
                <Form.Item
                  style={{ margin: 0 }}
                  name={'qxProps-max'}
                >
                  <InputNumber
                    bordered={false}
                    size='small'
                    precision={qxProps.precision || 0}
                    defaultValue={qxProps.max}
                    onBlur={(e) => handleChange(e, record, 'qxProps-max')}
                    style={{ width: '110px' }}
                    placeholder="最大值"
                  />
                </Form.Item>
                <Divider type="vertical" style={{ height: '16px' }} />
              </div>
              <div className='range-cell'>
                <Form.Item
                  style={{ margin: 0 }}
                  name={'qxProps-precision'}
                >
                  <InputNumber
                    bordered={false}
                    size='small'
                    precision={0}
                    min={0}
                    max={8}
                    defaultValue={qxProps.precision}
                    onBlur={(e) => handleChange(e, record, 'qxProps-precision')}
                    placeholder="小数位数"
                  />
                </Form.Item>
              </div>
            </div>
          );
        case 'TIME':
          return (
            <div
              key={record.id}
              className="editable-cell"
            >
              <div className='range-cell'>
                <DatePicker
                  bordered={false}
                  size='small'
                  defaultValue={
                    qxProps?.min
                      ? moment(qxProps.min)
                      : undefined
                  }
                  format={formatEnum[qxProps?.format]}
                  style={{ width: '110px' }}
                  showTime
                  onChange={(e) => handleChange(e, record, 'qxProps-min')}
                  placeholder="开始日期"
                />
                -
                <DatePicker
                  size='small'
                  bordered={false}
                  defaultValue={
                    qxProps?.min
                      ? moment(qxProps.max)
                      : undefined
                  }
                  format={formatEnum[qxProps?.format]}
                  style={{ width: '110px' }}
                  showTime
                  onChange={(e) => handleChange(e, record, 'qxProps-max')}
                  placeholder="结束日期"
                />
                <Divider type="vertical" style={{ height: '16px' }} />
              </div>
              <div className='range-cell'>
                <Select
                  size='small'
                  style={{ width: '90px' }}
                  bordered={false}
                  placeholder="格式"
                  popupMatchSelectWidth={false}
                  defaultValue={qxProps.format}
                  onSelect={(e) =>
                    handleChange(e, record, 'qxProps-format')
                  }
                >
                  {timeFormat.map((item) => {
                    return (
                      <Select.Option
                        style={{ width: '200px' }}
                        key={item.value}
                        value={item.value}
                      >
                        {item.label}
                      </Select.Option>
                    );
                  })}
                </Select>
              </div>
            </div>
          );
        case 'FORM':
        case 'USER':
        case 'ORG':
          return (
            <div
              className='editable-cell'
              key={record.id}
            >
              <QxFormSelect
                value={qxProps}
                appId={props?.appId}
                placeholder={'选择表单'}
                popupOnBody={true}
                onChange={(val: any) => {
                  handleChange(val, record, 'qxProps');
                }}
                disabled={['USER', 'ORG'].includes(record.type)}
                request={props?.request}
              />
            </div>
          );
        default:
      }
    },
  };

  const require = {
    title: '必填',
    dataIndex: 'required',
    editable: true,
    key: 'required',
    width: '5%',
    render: (text, record) => (
      <Form.Item
        name={'required' + record.id}
        style={{ margin: 0 }}
      >
        <Select
          defaultValue={text || false}
          bordered={false}
          disabled={record.disabled}
          onSelect={(e) => props.handleChange(e, record, 'required')}
        >
          <Select.Option value={true}>是</Select.Option>
          <Select.Option value={false}>否</Select.Option>
        </Select>
      </Form.Item >
    ),
  };

  if (nodeType !== 'END') {
    columns.splice(3, 0, range, require)
  }

  // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
  const [isShowJson, setIsShowJson] = useState<any>(false);
  const [midData, setMidData] = useState<any>([]);
  useEffect(() => {
    if (visible) {
      if (data.length == 0) {
        handleAdd('');
      }
    }

  }, [visible]);

  //展开 所有子节点
  const generateTreeData = useCallback(
    (_data: any[], _keywords?: string): any[] => {
      const _treeNode: any[] = [];
      (_data || []).map((item) => {
        if (item.pid == _keywords) {
          const child = generateTreeData(_data, item.id);
          if (
            child?.length &&
            (item?.type == 'OBJECT' || item?.type == 'ARRAY')
          ) {
            item.child = child;
          }
          _treeNode.push(item);
        }
      });
      return _treeNode;
    },
    [],
  );

  //每行拖拽渲染
  const onRow = () => ({
    draggable: true,
    style: { cursor: 'move' },
    onDragStart: (ev: any) => {
      ev.persist();
      ev.dataTransfer.effectAllowed = 'move';
      ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key'));
    },
    onDragEnter: (ev: any) => {
      ev.persist();
      let nodes;
      switch (ev.target.tagName) {
        case 'TD':
          nodes = ev.target.parentNode.childNodes;
          break;
        case 'DIV':
          nodes = ev.target.parentNode.parentNode.childNodes;
          break;
        default:
          nodes = [];
      }
      nodes?.forEach(
        (item: any) => (item.style.borderTop = '2px solid #1764FF'),
      );
    },
    onDragLeave: (ev: any) => {
      ev.persist();
      let nodes;
      switch (ev.target.tagName) {
        case 'TD':
          nodes = ev.target.parentNode.childNodes;
          break;
        case 'DIV':
          nodes = ev.target.parentNode.parentNode.childNodes;
          break;
        default:
          nodes = [];
      }
      nodes?.forEach((item: any) => (item.style.borderTop = ''));
    },

    onDrop: (ev: any) => {
      ev.preventDefault();
      ev.stopPropagation();
      const dragId = ev.dataTransfer.getData('text');
      let dropCol;
      switch (ev.target.tagName) {
        case 'TD':
          dropCol = ev.target.parentNode;
          break;
        case 'DIV':
          dropCol = ev.target.parentNode.parentNode;
          break;
        default:
          dropCol = ev.target;
      }
      // dropCol.parentNode.insertBefore(dragCol, dropCol); // DOM操作
      const dropId =
        dropCol.getAttribute('data-row-key') ||
        dropCol.getAttribute('id')?.slice(4);
      const _newTreeData = cloneDeep(treeData);
      const dragIndex = _newTreeData.findIndex(
        (item: any) => item.id === dragId,
      ); //要drop的index
      const dropIndex = _newTreeData.findIndex(
        (item: any) => item.id === dropId,
      ); // 要drop到目标的index
      if (dragIndex == dropIndex || !dragId || !dropId) {
        dropCol.childNodes.forEach((item: any) => (item.style.borderTop = ''));
        dropCol.parentNode.childNodes.forEach(
          (item: any) => (item.style.borderTop = ''),
        );
        return;
      } else {
        if (!!_newTreeData[dropIndex].pid) {
          const pidIndex = _newTreeData.findIndex(
            (item: any) => item.id === _newTreeData[dropIndex].pid,
          );
          if (_newTreeData[pidIndex].type == 'ARRAY') {
            message.warning('数组有且只有一个子节点，请重试！');
            dropCol.childNodes.forEach(
              (item: any) => (item.style.borderTop = ''),
            );
            dropCol.parentNode.childNodes.forEach(
              (item: any) => (item.style.borderTop = ''),
            );
            return;
          }
          _newTreeData[dragIndex].pid = _newTreeData[dropIndex].pid;
        } else {
          _newTreeData[dragIndex].pid = '';
        }
        const todoData = _newTreeData.splice(dragIndex, 1); //获取要drop的item
        _newTreeData.splice(dropIndex, 0, todoData[0]); // 插入
      }
      const _newData = generateTreeData(_newTreeData, '');
      handleDrop(_newData);
      dropCol.childNodes.forEach((item: any) => (item.style.borderTop = ''));
      dropCol.parentNode.childNodes.forEach(
        (item: any) => (item.style.borderTop = ''),
      );
    },
    onDragOver: (ev: any) => ev.preventDefault(),
  });

  const onCancel = () => {
    setIsShowJson(false);
    handleCancel(inputKey + 1);
  };

  const submit = () => {
    try {
      JSON.parse(midData);
      handleDrop(JSON.parse(midData));
      message.success('保存成功');
      setTimeout(() => {
        onCancel();
      }, 0);
    } catch (error) {
      message.error('JSON转成数据有错误请重试！');
      return;
    }
  };

  const onOpen = () => {
    setMidData(JSON.stringify(data, null, 4));
    setIsShowJson(true);
  };

  const onJsonChange = (_data: any) => {
    setMidData(_data);
  };

  return (
    <>
      <Modal
        title="高级参数设计器"
        open={visible}
        destroyOnClose
        footer={null}
        // onOk={handleCancel}
        onCancel={onCancel}
        width={'100%'}
      >
        {isShowJson ? (
          <Row>
            <Col span={12}>
              <Button
                type="link"
                icon={<SnippetsOutlined />}
                onClick={() => setIsShowJson(false)}
              >
                {'表单参数设置'}
              </Button>
            </Col>
          </Row>
        ) : (
          <Row>
            <Col span={12}>
              <Button type="link" icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />} onClick={() => onOpen()}>
                JSON参数设置
              </Button>
            </Col>
            <Col
              className="border-none"
              span={12}
              style={{
                display: 'flex',
                flexDirection: 'row-reverse',
                marginBottom: '10px',
                textAlign: 'center',
              }}
            >
              <Input
                className={'qx-parameter-setting--search'}
                placeholder="按名称搜索"
                prefix={<QxBaseIcon type={'icon-app-search-line'} />}
                onChange={onChange}
                style={{ width: 219 }}
              />
            </Col>
          </Row>
        )}
        {
          isShowJson ? (
            <>
              <JSONEditor value={midData} onChange={onJsonChange} />
              <Col
                className="border-none"
                span={24}
                style={{
                  display: 'flex',
                  flexDirection: 'row-reverse',
                  marginBottom: '10px',
                  textAlign: 'center',
                }}
              >
                <Space>
                  <Button onClick={() => onCancel()}>{'取消'}</Button>
                  <Button type="primary" onClick={() => submit()}>
                    {'确定'}
                  </Button>
                </Space>
              </Col>
            </>
          ) : (
            <Table
              // components={components}
              expandable={{
                defaultExpandAllRows: true,
                childrenColumnName: 'child'
              }}
              onRow={() => onRow()}
              scroll={{ x: 960 }}
              // rowClassName={() => 'editable-row'}
              bordered
              pagination={false}
              size={'small'}
              // @ts-ignore
              columns={columns}
              dataSource={data}
              rowKey={'id'}
            />
          )
        }
      </Modal>
    </>
  );
};

export default ParameterModal;