import styled from 'styled-components/native';
import { theme } from 'data/dataMx';

interface ITextStyleProps {
  font: string;
}

interface ISwitchProps {
  checked: boolean;
  disabled: boolean;
  size?: string;
  background? : string;
  color?: string;
  focus?: boolean
}

interface ItoggleWrapperProps {
  focus?: boolean
}

export const ToggleWrapper = styled.View`
  flexDirection: column;
  alignItems: flex-start;
`

export const ToggleContainer = styled.View`
  flexDirection: row;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 0;
  border-width: 2px;
  border-color: ${({ focus }: ItoggleWrapperProps) => focus? theme.tertiary100 : theme.neutral100}; 
  border-radius: 8px
`;

export const StatusText = styled.Text`
  font-family: ${({ font }: ITextStyleProps) => font};
  margin-left: 5px;
  font-size: 16px;
`;

export const LabelContainer = styled.View`
  flexDirection: column;
`;

export const LabelText = styled.Text`
  font-family: ${({ font }: ITextStyleProps) => font};
  flexDirection: column;
`;

export const StatusTextContainer = styled.View`
  justifyContent: center;
  alignItems: center;
  flex:1;
  margin-left: 5px;
`;

export const ToggleSwitchXs = styled.TouchableOpacity`
  justifyContent: center;
  width: ${({ size }: ISwitchProps) => (size =='xs' ? 48 : 32)};
  height: ${({ size }: ISwitchProps) => (size =='xs' ? 24 : 16)};
  left: 4;
  padding-top: 2;
  padding-right: 2;
  padding-bottom: 2;
  padding-left: 2;
  borderRadius: 20;
  borderWidth: 1;
  borderColor: ${({ disabled, color, focus }: ISwitchProps) => (disabled ? theme.neutral400 :(focus? theme.primary400  : (color!== ''? color : theme.primary)))};
  translateX: 26;
  backgroundColor: ${({ disabled, checked, background, focus }: ISwitchProps) => disabled ? theme.neutral200 : (background!== ''? background : (focus && checked? theme.primary400 : (checked ? theme.primary : theme.neutral100)))};
`;

export const InnerCircleXs = styled.View`  
  alignItems: center;
  justifyContent: center;
  margin: 0;
  left: ${({ size }: ISwitchProps) => (size =='xs' ? 3 : 2)};
  position: absolute;
  width: ${({ size }: ISwitchProps) => (size =='xs' ? 19 : 12)};
  height: ${({ size }: ISwitchProps) => (size =='xs' ? 19 : 12)};
  borderRadius: 20;
  shadowOpacity: 0.2;
  shadowRadius: 2.5;
  elevation: 1.5;
  backgroundColor: ${({ disabled, checked, color, focus }: ISwitchProps) => disabled ? theme.neutral500 : (focus && !checked? theme.primary400  : (color!== ''? color : (checked ? theme.neutral100 : theme.primary)))};
`;