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

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

export const Tabs = styled.View`
  padding-left: ${wp(5)}px;
  padding-right: ${wp(5)}px;
  flex-direction: row;
  background-color: ${THEME?.INFO?.MAIN};
`;
export const Tab = styled.TouchableOpacity<{active: boolean}>`
  padding-bottom: ${hp(1)}px;
  border-bottom-width: ${props => (props?.active ? '3px' : '0px')};
  border-color: #83d1d8;
  margin-right: ${wp(5)}px;
`;

export const TabText = styled.Text`
  color: #fff;
  font-family: ${FONTS?.SEMI_BOLD};
  font-size: ${hp(2.2)}px;
`;

export const Wrapper = styled(KeyboardAwareScrollView)``;

export const WrapperContentStyle = {
  paddingLeft: wp(5),
  paddingRight: wp(5),
  paddingTop: wp(5),
  paddingBottom: wp(8),
  flexGrow: 1,
  flex: 1, //to enable refresh control for nested scroll view.
};

export const StyledNotification = styled.View`
  background-color: ${THEME?.INFO?.MAIN};
  padding: ${wp(5)}px;
  margin-bottom: ${wp(5)}px;
`;

export const NotificationHeader = styled.View`
  flex-direction: row;
`;

export const NotificationTitle = styled.Text`
  color: #fff;
  font-family: ${FONTS?.REGULAR};
  flex: 1;
  padding-right: ${wp(5)}px;
  padding-left: ${wp(5)}px;
  font-size: ${wp(4)}px;
`;

export const NotificationTime = styled.Text`
  color: #979ced;
  font-family: ${FONTS?.MEDIUM};
  padding-top: ${wp(0.5)}px;
`;

export const DocumentIconWrapper = styled.View`
  padding-top: ${wp(1)}px;
`;

export const NotificationFooter = styled.View`
  flex-direction: row;
  margin-top: ${hp(2)}px;
`;

export const AddToWalletButton = styled(Button)`
  padding-left: ${hp(2)}px;
  padding-right: ${hp(2)}px;
  padding-top: ${hp(1)}px;
  padding-bottom: ${hp(1)}px;
  margin-right: ${hp(2)}px;
`;

export const DeleteButton = styled(Button)`
  padding-left: ${hp(2)}px;
  padding-right: ${hp(2)}px;
  padding-top: ${hp(1)}px;
  padding-bottom: ${hp(1)}px;
  background-color: transparent;
  border-width: 1px;
  border-color: #dd7e7e;
`;

export const DeleteLabelStyles = {
  color: '#dd7e7e',
};

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

export const ComingSoonTitle = styled.Text`
  color: ${THEME?.SECONDARY?.LIGHT};
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(4)}px;
  padding-top: ${hp(2)}px;
  padding-bottom: ${hp(2)}px;
`;
export const ComingSoonSubTitle = styled.Text`
  color: #fff;
  font-family: ${FONTS?.MEDIUM};
  font-size: ${wp(5)}px;
`;

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

export const NotificationWrapper = styled(KeyboardAwareScrollView)``;