import styled from '@emotion/native';
import { TouchableOpacity, View } from 'react-native';
import HeroIcon from '../Icon';
import Typography from '../Typography';

type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';

export const StyledWrapper = styled(TouchableOpacity)<{
  themeState: CheckboxThemeState;
}>(({ theme, themeState }) => ({
  flexDirection: 'row',
  borderRadius: theme.__hd__.checkbox.radii.wrapper,
  borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
  padding: theme.__hd__.checkbox.space.wrapperPadding,
  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
  gap: theme.__hd__.checkbox.space.inlineCheckboxGap,
}));

export const StyledDescription = styled(Typography.Body)(({ theme }) => ({
  paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
  flex: 1,
}));

export const StyledCheckboxContainer = styled(View)(({ theme }) => ({
  height: theme.__hd__.checkbox.sizes.icon,
  width: theme.__hd__.checkbox.sizes.icon,
  overflow: 'hidden',
}));

export const StyledCheckbox = styled(View)<{
  themeState: CheckboxThemeState;
}>(({ theme, themeState }) => ({
  flex: 1,
  borderRadius: theme.__hd__.checkbox.radii.icon,
  borderWidth: theme.__hd__.checkbox.borderWidths.icon,
  borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
}));

export const StyledCheckMark = styled(HeroIcon)<{
  themeState: CheckboxThemeState;
}>(({ theme, themeState }) => ({
  position: 'absolute',
  top: theme.__hd__.checkbox.space.iconTop,
  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
}));