import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';
import formControlStyles from '../../styles/form-control.styles.mjs';

const styles = css`
  ${componentStyles}
  ${formControlStyles}

  :host {
    display: block;

    --footer-spacing: var(--flow-ui-spacing-x-small);
  }

  :host([label]) {
    margin-top: var(--flow-ui-spacing-x-large);
  }

  .form-control__label {
    font-weight: var(--flow-ui-font-weight-semibold);
  }

  .query-builder__menu-dropdown {
    margin-right: -4px;
  }

  /* Toolbar */
  .query-builder__toolbar {
    display: flex;
    align-items: center;
    gap: var(--flow-ui-spacing-x-small);
  }

  .query-builder__toolbar .spacer {
    flex: 1;
  }

  .query-builder-and-or-button-group flow-ui-tool-button::part(label) {
    text-transform: uppercase;
    font-weight: var(--flow-ui-font-weight-bold);
  }

  .query-builder__toolbar-button::part(base) {
    color: var(--flow-ui-color-neutral-500);
    padding-inline: 0;
  }

  .query-builder.query-builder--has-border {
    margin-inline: calc(var(--control-spacing) * -1 - var(--control-border-width));
    padding-top: var(--flow-ui-spacing-x-small);
    padding-inline: var(--control-spacing);
    border: solid var(--control-border-width) var(--control-border-color);
    border-radius: var(--control-border-radius);
  }

  /* Rule */
  .query-builder__rule:not(.query-builder--child) {
    display: flex;
    gap: var(--flow-ui-spacing-x-small);
    align-items: center;
  }

  .query-builder__rule + .query-builder__rule {
    margin-top: var(--flow-ui-spacing-x-small);
  }

  .query-builder__rule-remove-button::part(base) {
    padding-inline: 0;
  }

  .query-builder__rule-checkbox::part(base) {
    display: flex;
    padding-inline: 0;
  }

  .query-builder__rule-control-container {
    display: flex;
    position: relative;
    flex: 1;
    gap: var(--flow-ui-spacing-x-small);
  }

  .query-builder__field-select {
    flex: 1;
  }

  .query-builder__operator-select {
    flex: 0.5;
  }

  .query-builder__rule-value-wrapper {
    display: flex;
    flex: 1;
  }

  .query-builder__rule-value-control {
    flex: 1;
    /* Override the browser minimum width on inputs */
    width: 0;
  }

  /* Grey out disabled rules */
  .query-builder__rule--disabled {
    background-color: var(--flow-ui-color-neutral-100);
  }

  /* Add strike-through for disabled rules */
  .query-builder__rule--disabled .query-builder__rule-control-container::before {
    content: '';

    display: block;
    position: absolute;
    top: 50%;
    left: -5px;
    right: 5px;
    z-index: 1;

    border-bottom: 1px solid var(--flow-ui-color-danger-300);
  }

  .query-builder__rule-menu-button {
    margin-inline: calc(var(--flow-ui-spacing-x-small) * -1);
    color: var(--flow-ui-color-neutral-700);
  }

  .query-builder__toolbar:hover .query-builder__rule-menu-button,
  .query-builder__rule:hover .query-builder__rule-menu-button {
    color: var(--flow-ui-color-neutral-900);
  }

  .menu-item--danger::part(base) {
    color: var(--flow-ui-color-danger-500);
  }

  .query-builder__rule-checkbox {
  }

  .query-builder__unrecognized-field-container {
    flex: 1;
    background-color: var(--flow-ui-color-danger-100);
    padding-inline: var(--flow-ui-spacing-small);
  }

  /* Small rule sizes */
  .query-builder--medium .query-builder__toolbar {
    margin-bottom: var(--flow-ui-spacing-x-small);
  }

  .query-builder--small .query-builder__field-select {
    max-width: 200px;
  }

  .query-builder--small .query-builder__operator-select {
    max-width: 120px;
  }

  .query-builder--small .query-builder-and-or-button-group flow-ui-tool-button {
    width: 30px;
  }

  .query-builder--small .q-connector {
    margin-left: 38px;
  }

  /* Medium rule sizes */
  .query-builder--medium .query-builder__toolbar {
    margin-bottom: var(--flow-ui-spacing-x-small);
  }

  .query-builder--medium .query-builder__field-select {
    max-width: 250px;
  }

  .query-builder--medium .query-builder__operator-select {
    max-width: 150px;
  }

  .query-builder--medium .query-builder-and-or-button-group flow-ui-tool-button {
    width: 30px;
  }

  /* Large rule sizes */
  .query-builder--large .query-builder__toolbar {
    margin-bottom: var(--flow-ui-spacing-x-small);
  }

  .query-builder--large .query-builder__field-select {
    max-width: 250px;
  }

  .query-builder--large .query-builder__operator-select {
    max-width: 150px;
  }

  .query-builder--large .query-builder-and-or-button-group flow-ui-tool-button {
    width: 40px;
  }

  .query-builder--large.query-builder--tree-lines .query-builder__rule.query-builder--child {
    margin-top: var(--flow-ui-spacing-x-small);
  }

  /* Query builder with tree connector lines */

  .query-builder--tree-lines .query-builder__rules {
    margin-top: var(--flow-ui-spacing-3x-small);
  }

  .query-builder--tree-lines .query-builder__rule:not(.query-builder--child) {
    position: relative;
    margin-left: 38px;

    &::before {
      top: calc(var(--flow-ui-spacing-x-small) * -1);
      bottom: 50%;
      border-width: 0 0 2px 2px;
    }

    &::after {
      border-width: 0 0 0 2px;
      top: 0;
      bottom: 0;
    }

    &::before,
    &::after {
      content: '';
      left: -10px;
      border-color: var(--control-border-color);
      border-style: solid;
      width: 9px;
      position: absolute;
    }

    &:last-child::after {
      content: none;
    }
  }

  .query-builder--tree-lines .query-builder__rule.query-builder--child {
    position: relative;
    margin-top: var(--flow-ui-spacing-2x-small);
    margin-left: 38px;

    &::before {
      top: calc(var(--flow-ui-spacing-x-small) * -1);
      height: 20px;
      border-width: 0 0 2px 2px;
    }

    &::after {
      border-width: 0 0 0 2px;
      top: 0;
      bottom: 0;
    }

    &::before,
    &::after {
      content: '';
      left: -10px;
      border-color: var(--flow-ui-color-neutral-200);
      border-style: solid;
      width: 9px;
      position: absolute;
    }

    &:last-child::after {
      content: none;
    }
  }

  .query-builder--tree-lines.query-builder--large .query-builder__rule {
    margin-left: 48px;
  }

  /* Child query builder */
  .query-builder--child:not([tree-lines]) {
    padding-top: var(--flow-ui-spacing-small);
    padding-left: var(--flow-ui-spacing-small);
    margin-right: -2px;
    padding-right: 2px;
    border: 1px solid var(--flow-ui-color-neutral-200);
    border-radius: var(--flow-ui-border-radius-medium);
  }

  .query-builder--child.query-builder--no-rules {
    background-color: var(--flow-ui-color-danger-100);
  }

  /* Footer */
  .query-builder__footer {
    display: flex;
    align-items: top;
    margin-top: var(--footer-spacing);
  }

  .query-builder__add-filter-button::part(label-wrapper) {
    padding-left: 0;
    flex-direction: row;
  }

  .query-builder__footer-auxiliary {
    display: flex;
    flex: 1;
    justify-content: end;
    gap: var(--flow-ui-spacing-small);

    padding-top: var(--footer-spacing);
  }

  .form-control--has-border .query-builder__footer-auxiliary {
    margin-right: calc(var(--control-spacing) * -1 - var(--control-border-width));
  }

  .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
    margin-inline-start: var(--flow-ui-spacing-x-small);
  }

  /* Sub query builder styling */

  .query-builder--child[borders='true'] {
    /* remove right border */
    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius);
    border-right: 0;
  }
`;

export { styles as default };
