import _ from "lodash";
import React, { FormEvent, useState } from "react";
import classNames from "classnames";
import { Select, Input, Button, Form } from "antd";
import { useForm } from "antd/lib/form/Form";
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  CloseOutlined,
  PlusSquareOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import {
  QueryBuilderConnector,
  QueryBuilderConnectorValue,
  QueryBuilderGroup,
  QueryBuilderItem,
  QueryBuilderOperator,
  QueryBuilderRule,
} from ".";
import "./style.less";

const Option = Select.Option;

const RuleOperator: React.FC<{
  value: QueryBuilderOperator;
}> = (props) => {
  let options = [
    { title: "等于", value: "=" },
    { title: "不等于", value: "<>" },
    { title: "小于", value: "<" },
    { title: "大于", value: ">" },
  ];
  return (
    <Select size="small" value={props.value}>
      {options.map((n) => (
        <Option value={n.value}>{n.title}</Option>
      ))}
    </Select>
  );
};

const QueryBuilder: React.FC = (props) => {
  const [form] = useForm();
  const [root, setRoot] = useState<QueryBuilderGroup>({
    id: "root",
    type: "group",
    childrens: [],
  });

  const isConnector = (
    node: QueryBuilderItem
  ): node is QueryBuilderConnector => {
    return (node as any).type == "connector";
  };

  const isGroup = (node: QueryBuilderItem): node is QueryBuilderGroup => {
    return (node as any).type == "group";
  };

  const isRule = (node: QueryBuilderItem): node is QueryBuilderRule => {
    return (node as any).type == "rule";
  };

  const build = (
    node: QueryBuilderItem,
    parent: QueryBuilderGroup | null = null,
    level: number = 0
  ) => {
    if (isConnector(node)) {
      return buildConnector(node, parent!);
    }
    if (isRule(node)) {
      return buildRule(node, parent!);
    }
    if (isGroup(node)) {
      return buildGroup(node, parent, level);
    }
  };

  const buildRoot = (node: QueryBuilderGroup, level: number) => {};

  const buildConnector = (
    node: QueryBuilderConnector,
    parent: QueryBuilderGroup
  ) => {
    const change = (value: QueryBuilderConnectorValue) => {
      node.value = value;
      setRoot({ ...root });
    };

    return (
      <div className="connector">
        <Select size="small" value={node.value} onChange={change}>
          <Option value="OR">OR</Option>
          <Option value="AND">AND</Option>
        </Select>
      </div>
    );
  };

  const buildRule = (node: QueryBuilderRule, parent: QueryBuilderGroup) => {
    let first = parent.childrens.findIndex((n) => n == node) == 0;
    let last =
      parent.childrens.findIndex((n) => n == node) ==
      parent.childrens.length - 1;

    return (
      <div className={classNames("rule", { first: first, last: last })}>
        <div className="rule-controls">
          <div className="rule-id">{node.id}</div>
          <div className="rule-dataset">
            <Input size="small" value={node.dataset} />
          </div>
          <div className="rule-datafield">
            <Input size="small" value={node.datafield} />
          </div>
          <div className="rule-operator">
            <RuleOperator value={node.operator} />
          </div>
          <div className="rule-value">{node.value}</div>
        </div>
        {buildActions(node, parent)}
      </div>
    );
  };

  const buildActions = (
    node: QueryBuilderRule | QueryBuilderGroup,
    parent: QueryBuilderGroup
  ) => {
    let len = parent.childrens.length;
    let index = parent.childrens.findIndex((n) => n == node);

    const moveUp = () => {
      let prev = parent.childrens[index - 2];
      parent.childrens[index - 2] = parent.childrens[index];
      parent.childrens[index] = prev;
      setRoot({ ...root });
    };

    const moveDown = () => {
      let next = parent.childrens[index + 2];
      parent.childrens[index + 2] = parent.childrens[index];
      parent.childrens[index] = next;
      setRoot({ ...root });
    };

    const remove = () => {
      if (len > 1) {
        if (index == len - 1) {
          parent.childrens.length = len - 2;
        } else {
          parent.childrens.splice(index, 2);
        }
      } else {
        parent.childrens = [];
      }
      setRoot({ ...root });
    };

    return (
      <div className="action">
        <div className="action-items">
          <span
            className={classNames("action-item", {
              disable: len == 1 || index == 0,
            })}
            onClick={moveUp}
          >
            <ArrowUpOutlined />
            <span>上移</span>
          </span>
          <span
            className={classNames("action-item", {
              disable: len == 1 || index == len - 1,
            })}
            onClick={moveDown}
          >
            <ArrowDownOutlined />
            <span>下移</span>
          </span>
          <span className="action-item" onClick={remove}>
            <CloseOutlined />
            <span>删除</span>
          </span>
        </div>
      </div>
    );
  };

  const buildGroup = (
    node: QueryBuilderGroup,
    parent: QueryBuilderGroup | null,
    level: number
  ) => {
    let classes = classNames("group", `group-level-${level}`);
    if (parent) {
      let first = parent.childrens.findIndex((n) => n == node) == 0;
      let last =
        parent.childrens.findIndex((n) => n == node) ==
        parent.childrens.length - 1;
      classes = classNames(classes, { first: first, last: last });
    }

    return (
      <div className={classes}>
        <div className="group-header">
          <div className="group-title">
            <Form.Item
              name={`group-${node.id}-name`}
              noStyle
              initialValue={node.id}
            >
              <Input size="small" />
            </Form.Item>
          </div>
          {parent && buildActions(node, parent)}
        </div>
        <div className="group-body">
          {node.childrens.map((n) => build(n, node, level++))}
        </div>
        <div className="group-footer">{buildAdder(node)}</div>
      </div>
    );
  };

  const buildAdder = (node: QueryBuilderGroup) => {
    const addGroup = () => {
      if (node.childrens.length > 0) {
        node.childrens.push({
          id: _.uniqueId("connector_"),
          type: "connector",
          value: "OR",
        });
      }
      let id = _.uniqueId("group_");
      node.childrens.push({
        id: id,
        type: "group",
        name: id,
        childrens: [],
      });
      setRoot({ ...root });
    };
    const addRule = () => {
      if (node.childrens.length > 0) {
        node.childrens.push({
          id: _.uniqueId("connector_"),
          type: "connector",
          value: "OR",
        });
      }
      node.childrens.push({
        id: _.uniqueId("rule_"),
        type: "rule",
        dataset: "用户表",
        datafield: "编号",
        operator: "=",
        value: "10334",
      });
      setRoot({ ...root });
    };

    return (
      <div className="adder">
        <Button.Group size="small">
          <Button onClick={addGroup}>
            <PlusSquareOutlined />
            添加分组
          </Button>
          <Button onClick={addRule}>
            <PlusOutlined />
            添加规则
          </Button>
        </Button.Group>
      </div>
    );
  };

  const onValuesChange = (changedValues: any, values: any) => {
    const find = (item: QueryBuilderItem, id: string): any => {
      if (id == item.id) {
        return item;
      }
      if (isGroup(item) && item.childrens && item.childrens.length > 0) {
        for (const n of item.childrens) {
          let result = find(n, id);
          if (result) {
            return result;
          }
        }
      }
    };
    for (const key in changedValues) {
      let [type, id, field] = key.split("-");
      let node = find(root, id);
      if (node) {
        node[field] = changedValues[key];
      }
    }
    console.log(root);
  };

  console.log(JSON.stringify(root));

  return (
    <div className="query-builder">
      <Form form={form} onValuesChange={onValuesChange}>
        {build(root)}
      </Form>
    </div>
  );
};

export { QueryBuilder };

import React, { Component } from "react";

class $TM_FILENAME_BASE$ extends Component<
  I$TM_FILENAME_BASE$Props,
  I$TM_FILENAME_BASE$State
> {
  constructor(props: I$TM_FILENAME_BASE$Props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    return <div></div>;
  }
}

interface I$TM_FILENAME_BASE$Props {}

interface I$TM_FILENAME_BASE$State {}

export default $TM_FILENAME_BASE$;