import { css } from 'styled-components';
import { VariantOfType } from '../../variants';
import { FormControlCss, FormFocusCss, FormPlaceholderCss } from '../styles';

export const SelectSelectCss = css`
  ${FormControlCss}

  padding: var(--form-control-padding);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  appearance: none;
  user-select: none;
  cursor: pointer;
  width: 100%;

  .select__selection {
    flex-grow: 1;
  }

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

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

  ${FormFocusCss}
  ${FormPlaceholderCss}

  &[data-focus-visible] {
    z-index: 10000;
  }

  &: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;
  }

  .select__values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
  }
`;

export const SelectPopoverCss = 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);

  &[data-focus-visible],
  &: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 SelectValueCss = 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 SelectOptionCss = 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 SelectOptionCheckCss = css`
`;

export const selectVariants = {
  default: {
    select: SelectSelectCss,
    popover: SelectPopoverCss,
    option: SelectOptionCss,
    optionCheck: SelectOptionCheckCss,
    value: SelectValueCss,
  },
};

export type ISelectVariants = VariantOfType<typeof selectVariants>;