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

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

export const StyledWrapper = styled(TouchableOpacity)<{
  themeState: CheckboxThemeState;
}>(({ theme }) => ({
  flexDirection: 'row',
  gap: theme.__hd__.checkbox.space.inlineCheckboxGap,
}));

export const StyledDescription = styled(Typography.Body)({
  flex: 1,
  alignSelf: 'center',
});

export const StyledCheckboxContainer = styled(View)<{
  themeSize?: 'medium' | 'large';
}>(({ theme, themeSize = 'medium' }) => ({
  height: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
  width: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
  overflow: 'hidden',
  margin: theme.__hd__.checkbox.space.inlineCheckboxMargin,
}));

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

export const StyledCheckMark = styled(HeroIcon)<{
  themeState: CheckboxThemeState;
  themeSize?: 'medium' | 'large';
}>(({ theme, themeState, themeSize = 'medium' }) => ({
  position: 'absolute',
  overflow: 'hidden',
  borderRadius: theme.__hd__.checkbox.radii.icon,
  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
  fontSize: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
}));