import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';

export const styles = StyleSheet.create({
  component: {
    width: '100%',
    height: '100%',
  },
  offsync: {
    paddingLeft: 16,
    fontWeight: 'bold',
    paddingBottom: 8,
  },
  option: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    alignItems: 'center',
  },
  border: {
    borderWidth: 0,
  },
  split: {
    marginLeft: 16,
    marginRight: 16,
    marginTop: 2,
    marginBottom: 2,
  },
  label: {
    fontSize: 15,
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    textAlign: 'auto',
    backgroundColor: 'transparent',
    fontWeight: 'normal',
  },
  press: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  smDetails: {
    width: '100%',
    height: '100%',
    display: 'flex',
  },
  smHeader: {
    height: 72,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 16,
    paddingLeft: 8,
    paddingRight: 8,
  },
  smTitle: {
    fontSize: 24,
    fontWeight: 600,
    minWidth: 0,
    flexShrink: 1,
    color: 'white',
  },
  smDate: {
    paddingLeft: 16,
  },
  smHost: {
    paddingLeft: 16,
    paddingTop: 4,
  },
  smIcon: {
    color: 'white',
    width: 48,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  smSubject: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
  },
  smInput: {
    fontSize: 24,
    fontWeight: 600,
    backgroundColor: 'transparent',
    flexShrink: 1,
  },
  smSpace: {
    flexGrow: 1,
  },
  smLabel: {
    paddingLeft: 16,
    paddingTop: 32,
  },
  smCard: {
    width: '100%',
    height: 80,
    paddingTop: 12,
    paddingBottom: 12,
    paddingRight: 16,
    paddingLeft: 16,
    icon: {
      borderRadius: 28,
      overflow: 'hidden',
    },
  },
  e2ee: {
    color: 'white',
    paddingLeft: 8,
  },
  section: {
    padding: 16,
    width: '100%',
  },
  content: {
    borderRadius: 8,
    paddingTop: 16,
    paddingBottom: 16,
  },
  sealed: {
    display: 'flex',
    flexDirection: 'row',
    paddingLeft: 16,
    alignItems: 'center',
    paddingTop: 12,
  },
  highlight: {
    display: 'flex',
    flexDirection: 'row',
    flexShrink: 1,
    paddingLeft: 12,
    paddingRight: 12,
    paddingTop: 6,
    paddingBottom: 6,
    alignItems: 'center',
    borderRadius: 8,
  },
  scrollWrapper: {
    flexGrow: 1,
    height: 1,
  },
  scrollContainer: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    paddingBottom: 128,
    paddingTop: 16,
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    height: '100%',
  },
  encrypted: {
    fontSize: 20,
    fontStyle: 'italic',
  },
  noAccess: {
    fontSize: 20,
    fontStyle: 'italic',
    padding: 32,
  },
  header: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingRight: 8,
    paddingLeft: 8,
    width: '100%',
    zIndex: 1,
    height: 48,
  },
  title: {
    fontSize: 20,
    flexGrow: 1,
    textAlign: 'center',
  },
  close: {
    width: 32,
  },
  closeIcon: {
    flexShrink: 0,
    marginRight: 0,
    marginLeft: 0,
    marginTop: 0,
    marginBottom: 0,
    backgroundColor: 'transparent',
  },
  divider: {
    width: '100%',
    height: 2,
  },
  info: {
    width: '80%',
    maxWidth: 400,
    paddingBottom: 32,
    paddingTop: 16,
  },
  item: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 4,
    paddingTop: 4,
  },
  itemLabel: {
    fontSize: 16,
    paddingLeft: 8,
  },
  itemHeader: {
    fontSize: 22,
    paddingLeft: 8,
  },
  guestSubject: {
    paddingBottom: 8,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    paddingRight: 4,
  },
  subject: {
    width: '100%',
    height: 52,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    paddingRight: 4,
    marginTop: 16,
    marginBottom: 16,
    borderRadius: 8,
  },
  input: {
    flexGrow: 1,
    backgroundColor: 'transparent',
  },
  underline: {
    display: 'none',
  },
  icon: {
    backgroundColor: 'transparent',
    padding: 0,
    margin: 0,
  },
  inputControl: {
    width: 32,
    height: 32,
    backgroundColor: 'yellow',
  },
  members: {
    width: '100%',
    flexGrow: 1,
  },
  actions: {
    display: 'flex',
    flexDirection: 'row',
    gap: 12,
    flexWrap: 'wrap',
    paddingLeft: 16,
    paddingRight: 16,
    justifyContent: 'center',
    paddingTop: 24,
    paddingBottom: 48,
  },
  action: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  actionLabel: {
    fontSize: 12,
  },
  actionIcon: {
    position: 'relative',
    top: 8,
    backgroundColor: 'transparent',
    padding: 0,
    margin: 0,
  },
  membership: {},
  card: {
    paddingBottom: 8,
    paddingTop: 8,
    paddingLeft: 16,
    paddingRight: 16,
    height: 48,
    width: '100%',
    borderBottomWidth: 1,
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
  memberModal: {
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  memberSurface: {
    position: 'relative',
    width: '80%',
  },
  modalHeader: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    alignItems: 'center',
  },
  modalTitle: {
    flexGrow: 1,
    paddingLeft: 16,
    fontSize: 20,
  },
  modalClose: {
    backgroundColor: 'transparent',
  },
  modalMembers: {
    minHeight: 128,
    maxHeight: 256,
    width: '100%',
  },
  modalArea: {
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 4,
  },
  modalButtons: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  modalButton: {
    borderRadius: 4,
    margin: 16,
  },
  noContacts: {
    width: '100%',
    height: 128,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  noContactsLabel: {
    color: Colors.placeholder,
    fontSize: 20,
  },
  memberSwitch: {
    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
  },
  error: {
    flexGrow: 1,
    paddingLeft: 32,
    color: Colors.offsync,
  },
  surfaceMaxWidth: {
    width: '100%',
  },
});
