import { numberInputAnatomy } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
import { getColor, mode } from '@chakra-ui/theme-tools';

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(numberInputAnatomy.keys);

const baseStyle = definePartsStyle((props) => {
  const focusBorderColor = getColor(
    props.theme,
    props.focusBorderColor
      ? props.focusBorderColor
      : mode('brand.500', 'brand.300')(props)
  );

  return {
    field: {
      border: 0,
      _focusVisible: {
        borderColor: focusBorderColor,
        boxShadow: `0 0 0 1px ${focusBorderColor}`,
        ring: '1px',
        ringColor: focusBorderColor,
        ringOffset: '1px',
        ringOffsetColor: focusBorderColor,
      },
    },
  };
});

export default defineMultiStyleConfig({
  baseStyle,
});
