import styled from 'styled-components/native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
import THEME from '@styles/theme';
import FONTS from '@assets/fonts';

export const Container = styled.View`
  background-color: ${THEME?.INFO?.DARK};
  flex: 1;
`;

export const Wrapper = styled(KeyboardAwareScrollView)``;

export const WrapperContentStyle = {
  paddingLeft: wp(5),
  paddingRight: wp(5),
  paddingBottom: wp(8),
  flexGrow: 1,
};

export const Title = styled.Text`
  color: #ffffff;
  font-family: ${FONTS?.MEDIUM};
  font-size: ${hp(2)}px;
  padding: ${wp(5)}px;
`;

export const Actions = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin-top: ${hp(1.5)}px;
`;

export const Action = styled.TouchableOpacity`
  align-items: center;
`;

export const ActionIcon = styled.View<{disabled?: boolean}>`
  background-color: ${props =>
    props?.disabled ? '#202241' : THEME?.INFO?.MAIN};
  width: ${wp(18)}px;
  height: ${wp(18)}px;
  border-radius: ${wp(10)}px;
  justify-content: center;
  align-items: center;
`;

export const ActionTitle = styled.Text<{disabled?: boolean}>`
  color: ${props => (props?.disabled ? '#202241' : '#FFF')};
  padding-top: ${hp(1)}px;
  font-family: ${FONTS?.MEDIUM};
  font-size: ${hp(1.5)}px;
`;

export const CredentialsNotFoundWrapper = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

export const WelcomeTitle = styled.Text`
  color: #ffffff;
  font-family: ${FONTS?.MEDIUM};
  font-size: ${hp(3)}px;
  width: ${wp(60)}px;
  text-align: center;
  padding-top: ${hp(5)}px;
`;

export const Description = styled.Text`
  font-family: ${FONTS.REGULAR};
  color: ${THEME?.SECONDARY?.LIGHT};
  font-size: ${hp(1.6)}px;
  width: ${wp(63)}px;
  text-align: center;
  padding-top: ${hp(2)}px;
`;

export const Body = styled.View`
  margin-top: ${hp(3)}px;
`;

export const CredentialsWrapper = styled.View<{
  index: number;
  zIndex: number;
  active: boolean;
}>`
  margin-top: ${({index}) => (index > 0 ? `-${hp(14)}px` : 0)};
  padding-left: ${({active}) => (active ? 0 : `${wp(2)}px`)};
  padding-right: ${({active}) => (active ? 0 : `${wp(2)}px`)};
  z-index: ${({zIndex}) => zIndex};
`;

export const NotificationWrapperStyle = {
  flexGrow: 1,
};