import styled from '@emotion/native';
import { Animated, View } from 'react-native';

export type Variant =
  | 'checked'
  | 'unchecked'
  | 'disabled-checked'
  | 'disabled-unchecked';

const StyledWrapper = styled(View)<{
  themeVariant: Variant;
}>(({ theme, themeVariant }) => ({
  height: theme.__hd__.switch.sizes.height,
  width: theme.__hd__.switch.sizes.width,
  paddingHorizontal: theme.__hd__.switch.spaces.paddingHorizontal,
  borderRadius: theme.__hd__.switch.radii.rounded,
  backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
  display: 'flex',
  justifyContent: 'center',
  opacity: themeVariant.includes('disabled') ? 0.4 : 1,
}));

const StyledKnot = styled(Animated.View)(({ theme }) => ({
  width: theme.__hd__.switch.sizes.thumb,
  height: theme.__hd__.switch.sizes.thumb,
  backgroundColor: theme.__hd__.switch.colors.thumb,
  borderRadius: theme.__hd__.switch.radii.rounded,
}));

export { StyledWrapper, StyledKnot };