import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, ReactNode, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { isEmptyValue } from '../utils/utils';
import { ComboboxValue } from './combobox-value';
import { ComboboxContext } from './combobox.context';
import { comboboxVariants, IComboboxVariants } from './combobox.variants';

const ComboboxComboboxStyle = styled.div<ComboboxComboboxProps>`
  ${props => getVariantKey('combobox', props.variant, props.variants)}
`;

const ComboboxInputStyle = styled(Ariakit.Combobox) <Ariakit.ComboboxProps & ComboboxVariantProps>`
  ${props => getVariantKey('input', props.variant, props.variants)}
`;

export type ComboboxVariantProps = {
  variant?: keyof typeof comboboxVariants | (string & {});
  variants?: IComboboxVariants;
  before?: ReactNode;
  after?: ReactNode;
};

export type ComboboxComboboxProps = Ariakit.ComboboxProps & ComboboxVariantProps;

export const ComboboxCombobox = forwardRef<HTMLInputElement, ComboboxComboboxProps>(
  function ComboboxCombobox({
    variant,
    variants,
    before,
    after,
    className,
    children,
    ...props
  }: ComboboxComboboxProps, ref) {
    const context = useContext(ComboboxContext);
    const store = Ariakit.useComboboxContext();
    const selectedValue = Ariakit.useStoreState(store, 'selectedValue');
    if (!context) {
      return;
    }
    if (!store) {
      return;
    }
    const onPointerDown = () => {
      // store.setValue('');
    };
    const onBlur = () => {
      // store.setValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
    };
    // console.log('selectedValue', selectedValue);
    const classNames = getClassNames('combobox__combobox', { empty: isEmptyValue(selectedValue) }, className);
    return (
      <>
        <ComboboxComboboxStyle
          className={classNames}
          variant={variant || context.variant}
          variants={variants || context.variants}
        >
          <div className="combobox__input-group"
            onPointerDown={onPointerDown}
            onBlur={onBlur}
          >
            {before}
            <ComboboxInputStyle
              ref={ref}
              className={getClassNames('combobox__input')}
              id={context.name}
              name={context.name}
              variant={variant || context.variant}
              variants={variants || context.variants}
              onFocus={context.onFocus}
              onBlur={context.onBlur}
              {...props}
            />
            {children}
            {after}
          </div>
        </ComboboxComboboxStyle>
        <ComboboxSelection />
      </>
    );
  });

const StyledDiv = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0 0.2rem 0.4rem 0.2rem;
`;

export function ComboboxSelection() {
  const store = Ariakit.useComboboxContext();
  const selectedValue = Ariakit.useStoreState(store, 'selectedValue');
  const context = useContext(ComboboxContext);
  if (!context) {
    return;
  }
  if (!context.multiple) {
    return;
  }
  if (Array.isArray(selectedValue) && selectedValue.length > 0) {
    return (
      <StyledDiv className="combobox__values">
        {selectedValue.map((value) => (
          <ComboboxValue key={value} value={value} label={value} />
        ))}
      </StyledDiv>
    );
  } else {
    return undefined;
  }
}