import { Radio } from '@base-ui/react/radio';
import { RadioGroup } from '@base-ui/react/radio-group';
import * as stylex from '@stylexjs/stylex';
import { Controller, useFormContext } from 'react-hook-form';

import {
  colors,
  fontSizes,
  radius,
  spacing,
  textColors,
} from '~/src/ui/tokens/tokens.stylex';
import { FormField } from './FormField';
import { FormCustomField } from './types';

const styles = stylex.create({
  group: {
    display: 'flex',
    flexDirection: 'column',
    gap: spacing[4],
  },
  row: {
    display: 'flex',
    alignItems: 'center',
    gap: spacing[4],
    cursor: 'pointer',
  },
  box: {
    boxSizing: 'border-box',
    flexShrink: 0,
    margin: 0,
    padding: 0,
    width: '2rem',
    height: '2rem',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: {
      default: colors.gray400,
      ':hover': colors.gray600,
    },
    borderRadius: radius.max,
    backgroundColor: colors.gray100,
    color: textColors.primary,
    cursor: 'pointer',
  },
  boxInvalid: {
    borderColor: colors.red,
  },
  indicator: {
    width: '1rem',
    height: '1rem',
    borderRadius: radius.max,
    backgroundColor: textColors.primary,
  },
  label: {
    fontSize: fontSizes.bodySmall,
    lineHeight: 1.4,
    color: textColors.primary,
    cursor: 'pointer',
  },
});

export const FormRadioControl = (props: FormCustomField) => {
  const { control } = useFormContext();

  const { name, required, options = [] } = props;

  return (
    <Controller
      control={control}
      name={name}
      rules={{ required }}
      render={({ field: { onChange, onBlur, value }, fieldState }) => (
        <RadioGroup
          value={value ?? ''}
          onValueChange={(next) => onChange(next)}
          {...stylex.props(styles.group)}
        >
          {options.map((option) => (
            <label key={option.value} {...stylex.props(styles.row)}>
              <Radio.Root
                value={option.value}
                onBlur={onBlur}
                {...stylex.props(
                  styles.box,
                  fieldState.invalid && styles.boxInvalid
                )}
              >
                <Radio.Indicator {...stylex.props(styles.indicator)} />
              </Radio.Root>
              <span {...stylex.props(styles.label)}>
                {option.label || option.value}
              </span>
            </label>
          ))}
        </RadioGroup>
      )}
    />
  );
};

export const FormRadio = (props: FormCustomField) => {
  return (
    <FormField {...props}>
      <FormRadioControl {...props} />
    </FormField>
  );
};