import { css } from 'styled-components';
import { CssButtonSecondary, CssDefault } from '../../components/button/button.variants';
import { VariantOfType } from '../../variants';
import { FormControlCss } from '../styles';

export const ComboboxComboboxCss = css`
  ${FormControlCss}

  display: flex;
  flex-direction: column;
  user-select: none;
  cursor: pointer;
  width: 100%;

  .combobox__input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    &>:first-child:not(.combobox__input) {
      margin-left: var(--form-control-padding);
    }

    &>:last-child:not(.combobox__input) {
      margin-right: var(--form-control-padding);
    }

    pointer-events: none;

    .combobox__input,
    button,
    a {
      pointer-events: auto;
    }
  }

  .combobox__input:not(:first-child):not(:last-child) {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  &:hover:not(.disabled) {
    border-color: var(--form-border-color-hover);
  }

  &:has(.combobox__input[data-focus-visible]) {
    outline: var(--form-outline);
    outline-color: var(--form-outline-color-focus);
    outline-offset: var(--form-outline-offset);
    z-index: 10000;
  }

  .combobox__input {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
    &[data-focus-visible] {
      outline: none;
    }
  }

  &.empty {
    .combobox__cancel {
      display: none;
    }
  }

  .combobox__values {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 0 0.2rem 0.4rem 0.2rem;
  }

  /*
  &:has(.combobox__input[data-active-item]) {
    outline-offset: 1px;
  }
  */

  /*
  &:hover {
    background-color: hsl(204 20% 99%);
  }

  &:active:not(.disabled),
  &.active:not(.disabled) {
    outline-color: var(--form-outline-color-focus);
    border-color: var(--form-border-color-hover);

    .placeholder {
      color: var(--form-color-placeholder);
    }
  }

  &.disabled {
    background-color: var(--form-background-color-disabled);
    color: var(--form-color-disabled);
    cursor: not-allowed;
  }

  &.hidden {
    display: none;
  }
  */
`;

export const ComboboxInputCss = css`
  width: 100%;
  padding: var(--form-control-padding);
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;

  .empty>&,
  &::placeholder {
    color: var(--form-color-placeholder);
    letter-spacing: inherit;
    font-feature-settings: inherit;
  }
`;

export const ComboboxPopoverCss = css`
  position: relative;
  display: flex;
  margin-left: 0rem;
  min-width: calc(var(--popover-anchor-width) + 0rem);
  max-height: min(var(--popover-available-height, 300px), 300px);
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--form-border-radius);
  box-shadow: var(--shadow-md);
  color: var(--form-color);
  z-index: 50;

  // background-color: var(--form-background-color);
  background: transparent;
  backdrop-filter: blur(10px);

  &:focus-visible {
    outline: var(--form-outline);
    outline-color: var(--form-outline-color-focus);
    outline-offset: var(--form-outline-offset);
  }

  &::-webkit-scrollbar-track {
    &, &:hover {
      background-color: transparent;
    }
  }
`;

export const ComboboxEmptyCss = css`
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.35em;
  font-size: var(--form-control-font-size);
  line-height: var(--form-control-line-height);
  padding: var(--form-control-padding);
  color: var(--form-color);
  text-align: center;
`;

export const ComboboxCancelCss = css`
  ${CssDefault}
  ${CssButtonSecondary}
  // font-size: var(--button-size-md);
  padding: 0.3em;
  margin-right: 0.5rem;
`;

export const ComboboxValueCss = css`
  display: flex;
  align-items: center;
  column-gap: 0.35em;
  padding: 0.35em 0.5em;
  font-size: 14px;
  line-height: 1.2;
  color: var(--form-color);
  border: 1px solid var(--form-border-color);
  border-radius: var(--form-border-radius);
  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
  cursor: pointer;

  &:hover,
  &:active {
    background-color: var(--form-border-color-hover);
    color: var(--form-color-hover);
  }

  &[data-active],
  &[data-active-item] {
    text-decoration: underline;
    color: var(--form-color-hover);
  }

  &[disabled],
  &[aria-disabled] {
    color: var(--form-color-disabled);
  }

  &.small {
    padding: 5px 8px;
    font-size: 12px;
  }
`;

export const ComboboxOptionCss = css`
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.35em;
  font-size: var(--form-control-font-size);
  line-height: var(--form-control-line-height);
  padding: var(--form-control-padding);
  color: var(--form-color);
  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
  cursor: pointer;

  &:hover,
  &:active {
    // background-color: var(--form-border-color-hover);
    background-color: rgba(0,0,0,0.05);
    color: var(--form-color-hover);
  }

  &[data-active],
  &[data-active-item] {
    text-decoration: underline;
    color: var(--form-color-hover);
  }

  &[data-focus-visible] {
    outline: none;
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-100);
  }

  &[disabled],
  &[aria-disabled] {
    color: var(--form-color-disabled);
  }

  &.small {
    padding: 5px 8px;
    font-size: 12px;
  }
`;

export const ComboboxOptionValueCss = css`
  [data-user-value] {
    font-weight: 700;
  }
`;

export const ComboboxOptionCheckCss = css`
`;

export const comboboxVariants = {
  default: {
    cancel: ComboboxCancelCss,
    combobox: ComboboxComboboxCss,
    empty: ComboboxEmptyCss,
    input: ComboboxInputCss,
    popover: ComboboxPopoverCss,
    option: ComboboxOptionCss,
    optionValue: ComboboxOptionValueCss,
    optionCheck: ComboboxOptionCheckCss,
    value: ComboboxValueCss,
  },
};

export type IComboboxVariants = VariantOfType<typeof comboboxVariants>;