import { Platform } from "react-native";
import styled from "styled-components/native";

interface IStylesProps {
  font: string;
  fontWeight: number;
  color: string;
  borderColor: string;
}

export const PreviewContainer = styled.View`
  alignItems: center;
  justifyContent: center;
  alignSelf: center;
`;

export const BlankFilePreview = styled.TouchableOpacity`
  width: 98px;
  height: 94px;
  borderStyle: dashed;
  borderRadius: 10px;
  borderWidth: 1px;
  borderColor: gray;
`;

export const ImagePreview = styled.TouchableOpacity`
  width: 98px;
  height: 94px;
`;

export const FileNameWrapper = styled.View`
  margin-top: 15px;
  text-align: center;
  flexDirection: row;
  alignItems: center;
  justifyContent: center;
`;

export const FileName = styled.Text`
  font-size: 14px;
  line-height: 20px;
  font-family: ${({ font }: IStylesProps) => font};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const IconWrapper = styled.TouchableOpacity`
  alignContent: center;
  flexDirection: row;
  alignItems: center;
  justifyContent: center;
`

export const UploadWrapper = styled.TouchableOpacity`
  margin-top: 20px;
  text-align: center;
`

export const UploadButtonWrapper = styled.View`
  display: flex;
  alignItems: center;
  justifyContent: center;
  width: 315px;
  margin-top: 20px;
  text-align: center;
`

export const CenteredView = styled.View`
  flex: 1;
  justifyContent: flex-end;
  alignItems: center;
  marginTop: 22px;
`;

export const ModalView = styled.View`
  backgroundColor: white;
  borderRadius: 20px;
  alignItems: center;
  shadowColor: ${({ color }: IStylesProps) => color};
  shadowOpacity: 0.25;
  shadowRadius: 4px;
  width:100%;
  elevation: 20;
`;

export const WrapperBtnMenuCamera = styled.View`
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${({ color }: IStylesProps) => color};
  border-bottom-color: ${({ borderColor }: IStylesProps) => borderColor};
  border-bottom-width: 2px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
`;

export const WrapperBtnMenuGalery = styled.View`
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${({ color }: IStylesProps) => color};
  border-bottom-color: ${({ borderColor }: IStylesProps) => borderColor};
  border-bottom-width: 2px;
`;

export const WrapperBtnMenuCancel = styled.View`
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${({ color }: IStylesProps) => color};
`;

export const Separator = styled.View`
  padding: 30px;
  height: 12px;
`;

export const TextContainer = styled.Text`
  paddingHorizontal: 100px;
  paddingVertical: 20px;
  color: ${({ color }: IStylesProps) => color};
`;