import * as stylex from '@stylexjs/stylex';
import { useFormContext } from 'react-hook-form';

import ChevronIcon from '~/src/components/Icon/ChevronIcon';
import { spacing, textColors } from '~/src/ui/tokens/tokens.stylex';
import { FormField } from './FormField';
import { formControl, formControlSize } from './styles';
import { FormCustomField } from './types';

const styles = stylex.create({
  wrapper: {
    position: 'relative',
  },
  select: {
    appearance: 'none',
  },
  placeholder: {
    color: textColors.tertiary,
  },
  icon: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    right: spacing[5],
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
  },
});

export const FormSelect = (props: FormCustomField) => {
  const { register, getFieldState, formState, watch } = useFormContext();

  const { name, placeholder, required, options = [] } = props;
  const state = getFieldState(name, formState);
  const value = watch(name);
  const showPlaceholder = Boolean(placeholder) && !value;

  return (
    <FormField {...props}>
      <div {...stylex.props(styles.wrapper)}>
        <select
          id={name}
          value={value ?? ''}
          {...stylex.props(
            formControl.base,
            formControlSize[props.size ?? 'medium'],
            styles.select,
            showPlaceholder && styles.placeholder,
            state.invalid && formControl.invalid
          )}
          {...register(name, { required })}
        >
          {placeholder && (
            <>
              <option value="" disabled hidden>
                {placeholder}
              </option>
              <option value="">-</option>
            </>
          )}

          {options.map((option) => (
            <option key={option.label || option.value} value={option.value}>
              {option.label || option.value}
            </option>
          ))}
        </select>
        <div {...stylex.props(styles.icon)}>
          <ChevronIcon size="1.4rem" direction="down" />
        </div>
      </div>
    </FormField>
  );
};