import { AntDActionElement, AntDValueSelector, QueryBuilderAntD,} from '@react-querybuilder/antd';
import { useState } from 'react';
import type { ActionProps, Field, FullField, Path, RuleGroupType, RuleType } from 'react-querybuilder';
import { QueryBuilder, ValueSelectorProps, defaultOperators, formatQuery, getOption, pathsAreEqual, useQueryBuilderQuery } from 'react-querybuilder';
import './styles.scss';

const operators = defaultOperators.filter(op => op.name === '=');

const fields: Field[] = [
  {
    name: 'isMusician',
    label: 'Is a musician',
    valueEditorType: 'checkbox',
    operators,
    defaultValue: false,
    group: 'music',
  },
  {
    name: 'instrument',
    label: 'Primary instrument',
    valueEditorType: 'select',
    values: [
      { name: 'guitar', label: 'Guitar' },
      { name: 'piano', label: 'Piano' },
      { name: 'drums', label: 'Drums' },
      { name: 'cowbell', label: 'Cowbell' },
    ],
    defaultValue: 'Cowbell',
    operators,
    group: 'music',
  },
  {
    name: 'isArtist',
    label: 'Is an Artist',
    valueEditorType: 'checkbox',
    operators,
    defaultValue: false,
    group: 'art',
  },
  {
    name: 'artMedium',
    label: 'Primary Art Medium',
    valueEditorType: 'select',
    values: [
      { name: 'painting', label: 'Painting' },
      { name: 'sculpture', label: 'Sculpture' },
      { name: 'photography', label: 'Photography' },
    ],
    operators,
    group: 'art',
  },
];

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [{ field: 'isMusician', operator: '=', value: true }],
};

export const MyFieldSelector = (props: ValueSelectorProps) => {
  const query = useQueryBuilderQuery();

  // For the first rule, only show "is a..." fields
  if (pathsAreEqual(props.path, [0])) {
    const options = (props.schema.fields as FullField[]).filter(f =>
      f.name.match(/^is[A-Z]/)
    );

    // This will wipe out the query if the user changes the value of the first rule.
    // Probably not exactly what you want, but just an example.
    const handleOnChange = (value: string) => {
      if (value !== props.value) {
        props.schema.dispatchQuery({
          combinator: 'and',
          rules: [{ field: value, operator: '=', value: true }],
        });
      } else {
        props.handleOnChange(value);
      }
    };
    return (
      <AntDValueSelector
        {...props}
        options={options}
        handleOnChange={handleOnChange}
      />
    );
  }

  // For other rules, show only the fields with the same "group" as the first rule
  const { field } = query.rules[0] as RuleType;
  const { group } = getOption(props.schema.fields, field)!;
  const options = (props.schema.fields as FullField[]).filter(
    f => f.group === group
  );
  return <AntDValueSelector {...props} options={options} />;
};

const RuleRemover = (props: ActionProps) =>
  pathsAreEqual(props.path, [0]) ? null : <AntDActionElement {...props} />;

const onAddRule = (r: RuleType, _pp: Path, query: RuleGroupType) => {
  const field = (query.rules[0] as RuleType).field;
  return { ...r, field };
};

export const App = () => {
  const [query, setQuery] = useState(initialQuery);

  return (
    <div>
      <QueryBuilderAntD>
        <QueryBuilder
          fields={fields}
          query={query}
          onQueryChange={setQuery}
          onAddRule={onAddRule}
          controlElements={{
            fieldSelector: MyFieldSelector,
            removeRuleAction: RuleRemover,
          }}
        />
      </QueryBuilderAntD>
      <h4>Query</h4>
      <pre>
        <code>{formatQuery(query, 'json')}</code>
      </pre>
    </div>
  );
};