import { define } from '@because/forge'
import { theme } from '../themes'

export const Form = define('Form', {
  base: 'form',
  display: 'flex',
  flexDirection: 'column',
  gap: 16,
})

export const FormField = define('FormField', {
  display: 'flex',
  flexDirection: 'column',
  gap: 6,
})

export const FormLabel = define('FormLabel', {
  base: 'label',
  fontSize: 13,
  fontWeight: 500,
  color: theme('colors-text'),
})

export const FormInput = define('FormInput', {
  base: 'input',
  padding: '8px 12px',
  background: theme('colors-bgSubtle'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  color: theme('colors-text'),
  fontSize: 14,
  selectors: {
    '&:focus': {
      outline: 'none',
      borderColor: theme('colors-primary'),
    },
    '&::placeholder': {
      color: theme('colors-textFaint'),
    },
  },
})

export const FormError = define('FormError', {
  fontSize: 13,
  color: theme('colors-error'),
})

export const FormActions = define('FormActions', {
  display: 'flex',
  justifyContent: 'flex-end',
  gap: 8,
  marginTop: 8,
})

export const FormSelect = define('FormSelect', {
  base: 'select',
  padding: '8px 12px',
  background: theme('colors-bgSubtle'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  color: theme('colors-text'),
  fontSize: 14,
  cursor: 'pointer',
  selectors: {
    '&:focus': {
      outline: 'none',
      borderColor: theme('colors-primary'),
    },
  },
})

export const FormCheckbox = define('FormCheckbox', {
  base: 'input',
  width: 16,
  height: 16,
  margin: 0,
  cursor: 'pointer',
  accentColor: theme('colors-primary'),
})

export const FormCheckboxField = define('FormCheckboxField', {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
})

export const FormCheckboxLabel = define('FormCheckboxLabel', {
  base: 'label',
  fontSize: 13,
  fontWeight: 500,
  color: theme('colors-text'),
  cursor: 'pointer',
})