import { Box } from '../Box';
import { Text } from '../Text';
import { styled } from '../styled';
import { getFontStyles } from '../utils/getFontStyles';
import { fontSize, palette, space, theme } from '../utils/theme';

export const FieldWrapper = styled.View`
  ${theme('native.FieldWrapper', 'styles.base')};
`;

export const LabelWrapper = styled(Box)`
  ${(props) =>
    props.variant === 'default' || props.variant === 'bordered'
      ? `
          margin-bottom: ${space(2)(props)}px;
        `
      : ''}

  ${theme('native.FieldWrapper', 'LabelWrapper.styles.base')};
`;

export const ContentWrapper = styled(Box)`
  ${(props) =>
    props.variant === 'underline' || props.variant === 'borderless'
      ? `
          margin-top: -${space(1)(props)}px;
        `
      : ''}

  ${theme('native.FieldWrapper', 'ContentWrapper.styles.base')};
`;

export const Label = styled(Text)`
  font-weight: 500;

  ${theme('native.FieldWrapper', 'Label.styles.base')};
`;

export const Description = styled(Text)`
  font-size: ${(props) => `${fontSize('150')(props)}px`};

  ${theme('native.FieldWrapper', 'DescriptionText.styles.base')};
`;

export const HintWrapper = styled(Box)`
  margin-top: ${(props) => `${space(1)(props)}px`};

  ${theme('native.FieldWrapper', 'HintTextWrapper.styles.base')};
`;

export const Hint = styled(Text)`
  font-size: ${(props) => `${fontSize('150')(props)}px`};

  ${theme('native.FieldWrapper', 'HintText.styles.base')};
`;

export const OptionalText = styled(Text)`
  font-size: ${(props) => `${fontSize('150')(props)}px`};
  color: ${palette('text100')};
  margin-left: ${(props) => `${space(2)(props)}px`};

  ${theme('native.FieldWrapper', 'OptionalText.styles.base')};
`;

export const RequiredText = styled(Text)`
  color: ${palette('danger')};
  margin-left: ${(props) => `${space(1)(props)}px`};
  font-size: ${(props) => `${fontSize('150')(props)}px`};

  ${getFontStyles({ fontWeight: '500' })};

  ${theme('native.FieldWrapper', 'RequiredText.styles.base')};
`;

export const ValidationTextWrapper = styled(Box)`
  margin-top: ${(props) => `${space(1)(props)}px`};

  ${theme('native.FieldWrapper', 'ValidationTextWrapper.styles.base')};
`;

export const ValidationText = styled(Text)`
  font-size: ${(props) => `${fontSize('150')(props)}px`};

  ${theme('native.FieldWrapper', 'ValidationText.styles.base')};
`;